foreach 刀片 laravel 中的 Dropzone 不工作

Question

我有 foreach 產品循環籃子里的產品可以從用戶那里得到很多照片用戶上傳照片到產品（賣農場的照片）模式在 foreach 循環中

當模態打開時 dropzone 不工作並收到此錯誤：

dropzone.js:1 未捕獲錯誤：Dropzone 已附加。

我的模態

<div class="modal fade"  id="productmultiplephoto-{{$product->pivot->id}}" role="dialog" aria-labelledby="productmultiplephoto" aria-hidden="true">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header pb-0">
            <h5 class="modal-title" id="price-changes-modal-label"></h5>
            <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">

               <div class="__img">
                   <div class="form-group">
                       <input type="hidden" name="original_name[]" id="product-photo">
                       <input name="product_id"  value="{{$product->id}}" type="hidden"  id="product_id" >
                       <input name="product_pivot"  value="{{$product->pivot->id}}" type="hidden"  id="product_pivot" >
                       <input name="cartproduct_id"   type="hidden"  id="cartproduct_id"value="{{$product->pivot->id}}" >

                       <label for="photog">upload</label>
                       <input type="hidden" name="original_name[]" id="product-photo">
                       <div id="photog" class="dropzone" ></div>
                   </div>
               </div>

        </div>
    </div>
</div>

我的劇本

 <script>
    Dropzone.autoDiscover = false;

    var photosGallery = []
    var drop = new Dropzone('#photog', {
        addRemoveLinks: true,
        url: "{{ route('front.photouser.upload') }}",
        type:"POST",

        sending: function(file, xhr, formData){
            formData.append("_token","{{csrf_token()}}")
            formData.append("product_id", document.getElementById('product_id').value);
            formData.append("product_pivot", document.getElementById('product_pivot').value);
            formData.append("cartproduct_id", document.getElementById('cartproduct_id').value);
        },
        success: function(file, response){
            photosGallery.push(response.original_name)
            if (response['level'] == 1) {
                $('.level1_message').html(response['message']);

            }
        }
    });
    productGallery = function(){
        document.getElementById('product-photo').value = photosGallery
    }

</script>

我的按鈕模態

@foreach($cart->products as $product)
     <button  type="button" data-toggle="modal" data-target="#productmultiplephoto-{{$product->pivot->id}}" class="btn-primary-multiple btn-primary-cm btn-with-icon">
    <i class="mdi mdi-plus-box-multiple"></i>
        upload
    </button>
   @endforeach

包括模態部分

@include('front::products.partials.add-multiple-photo')

Answer 1

像這樣更新你的 div：

<div class="photog dropzone"></div>

對於循環的每次迭代，您還應該為每個產品生成一個具有唯一名稱屬性的新隱藏輸入元素，以便在上傳文件時，您可以知道該文件被添加到哪個產品

<input type="hidden" name="product_id_{{$product->pivot->id}}" id="product_id" value="{{$product->id}}">

完整的JS：

<script>
document.addEventListener("DOMContentLoaded", function() {
    var photosGallery = [];
    Dropzone.autoDiscover = false;
    var dropzones = [];



    let modals = document.querySelectorAll('.dropzone-modal');
    modals.forEach((modal, index) => {
        let photog = modal.querySelector('.photog');
        let drop = new Dropzone(photog, {
            addRemoveLinks: true,
            url: "{{ route('front.photouser.upload') }}",
            type: "POST",
            sending: function(file, xhr, formData) {
                formData.append("_token", "{{csrf_token()}}")
                let product_id = modal.querySelector(`input[name='product_id']`);
                let product_pivot = modal.querySelector(`input[name='product_pivot']`);
                let cartproduct_id = modal.querySelector(`input[name='cartproduct_id']`);
                formData.append("product_id", product_id.value);
                formData.append("product_pivot", product_pivot.value);
                formData.append("cartproduct_id", cartproduct_id.value);
            },
            success: function(file, response) {
                photosGallery.push(response.original_name)
                if (response['level'] == 1) {
                    $('.level1_message').html(response['message']);
                }
            }
        });
        dropzones.push(drop);
    });

    let modalButtons = document.querySelectorAll('.btn-primary-multiple');
    modalButtons.forEach((button, index) => {
        button.addEventListener("click", () => {
            dropzones[index].removeAllFiles();
        });
    });


    productGallery = function() {
        document.getElementById('product-photo').value = photosGallery
    }

});
</script>

像這樣更新模態 div：

<div class="modal fade dropzone-modal"  id="productmultiplephoto-{{$product->pivot->id}}" role="dialog" aria-labelledby="productmultiplephoto" aria-hidden="true">