How to use dropzone while updating existing data - "sendingMultiple" never gets called

[dberken]

Hello, I am using Dropzone as a portion of a form and then appending the data on insert and that is all working fine. When i try to update the data and a user does not add any additional images the sending command does not get called. I would like to be able to update data outside of Dropzone for the object or remove existing files and handle them on my own backend with one form submit. Below is my code for the update Dropzone implementation.

<script>
        Dropzone.autoDiscover = false;
        
        document.addEventListener("DOMContentLoaded", function(){
            let productImages = JSON.parse('{!! $productImages !!}');

            var CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').getAttribute("content");

            let myDropzone = new Dropzone("#my-id",{
                url: route('image.update'),
                maxFilesize: 3,
                acceptedFiles: ".jpeg,.jpg,.png",
                autoProcessQueue: false,
                uploadMultiple: true,
                parallelUploads: 100,
                maxFiles: 100,
                addRemoveLinks: true,
                init: function () {
                    var myDropzone = this;

                    for (let i = 0; i < productImages.length; i++) {
                        var productImage = productImages[i];

                        var mockFile = { 
                            name: productImage.image_name,
                            size: 0,
                            status: Dropzone.ADDED,
                            url: productImage.file_path
                        };

                        myDropzone.files.push(mockFile);
                        myDropzone.emit("addedfile", mockFile);
                        myDropzone.emit("thumbnail", mockFile, mockFile.url);
                        myDropzone.emit("complete", mockFile);
                    }

                    for (let el of document.querySelectorAll('.dz-progress')) el.style.visibility = 'hidden';
                    
                    var submit = document.getElementById("form-submit");
                    submit.addEventListener("click", function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        if (myDropzone.files.length === 0) {
                            alert("Error: At least one image is required to be uploaded");
                        }
                        else {
                            myDropzone.processQueue();
                        }
                    });

                    this.on("sendingmultiple", function(file, xhr, formData) {
                        console.log("Got here");

                        var submitButton = document.getElementById('form-submit');
                        submitButton.style.visibility = 'hidden';

                        var form = document.getElementById("update-product-form");
                        var data = new FormData(form);
                        data.append("_token", CSRF_TOKEN);

                        for (var pair of data.entries()) {
                            formData.append(pair[0], pair[1]);
                        }
                    });
                    this.on("successmultiple", function(files, response) {                        
                        // window.location = response[0]['url'];
                        console.log(response);
                    });
                    this.on("errormultiple", function(files, response) {
                        var submitButton = document.getElementById('form-submit');
                        submitButton.style.visibility = 'visible';

                        var contentRowObject = document.getElementById('content-row');

                        for (const [key, value] of Object.entries(response.errors)) {
                            var el = document.createElement("p");
                            el.className = "text-danger";
                            el.appendChild(document.createTextNode(value));
                            contentRowObject.insertBefore(el, contentRowObject.firstChild);
                        }

                        alert("Error: " + response['message']);
                        for (let i = 0; i < files.length; i++) {
                            this.removeFile(files[i]);
                        }
                    });
                    this.on("addedfile", function(file) {
                        for (let el of document.querySelectorAll('.dz-progress')) el.style.visibility = 'hidden';
                    });
                }
            });
        });
</script>