I have foreach loop of product products in basket can get many of photos from user users upload photo to product(sell farm's photo) modal is in foreach loop

when modal is open dropzone not working and get this error:

dropzone.js:1 Uncaught Error: Dropzone already attached.

My modal

<div   id="productmultiplephoto-{{$product->pivot->id}}" role="dialog" aria-labelledby="productmultiplephoto" aria-hidden="true">
<div >
    <div >
        <div >
            <h5  id="price-changes-modal-label"></h5>
            <button type="button"  data-dismiss="modal"
                    aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div >

               <div >
                   <div >
                       <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"  ></div>
                   </div>
               </div>

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

My script

 <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>

My button modal

@foreach($cart->products as $product)
     <button  type="button" data-toggle="modal" data-target="#productmultiplephoto-{{$product->pivot->id}}" >
    <i ></i>
        upload
    </button>
   @endforeach

Include modal part

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

CodePudding user response：

Update your div like this :

<div ></div>

for each iteration of the loop, you should also generate a new hidden input element with a unique name attribute for each product so that when uploading the file, you can know to which product the file is being added

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

Full 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>

Update your modal div like this :

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