将数组输入发送到后端时，Dropzone 插入与相同数量的文件相同数量的值

Question

I have a simple dropbox that uploads files manually when a button is clicked:

var dropzone = $("#dropzone-form").dropzone({
        autoProcessQueue: false,
        addRemoveLinks: true,
        paramName: "fotos",
        url: url,
        uploadMultiple: true,
        init: function(){
            var dropzone_object = this;



            $('#btn-guardar').on('click', function(e){
                if(checkForm()){
                    if(dropzone_object.files.length > 0){
                        dropzone_object.processQueue();
                    }else{
                      sendWithoutFiles();
                    }

                }
            });


        },
        sending: function(file, xhr, formData) {

            var formValues = $('#form-productos').serializeArray();
            $.each(formValues, function(i, obj){
               formData.append(obj.name, obj.value);
            });


        },
        success: function(file, response){

        },
        error: function(file, errorMessage, xhr){

        }
    });

But I'm having problems when I upload more than one file because I have array inputs inside my form with id form-productos such as this:

<input name="emails[]">

or

<select name="colors[]"></select>

So, for each file that the dropzone queue has, it appends the input again, the inputs that are NOT array inputs have no problem because the value just gets overwritten again, so let's suppose that I have the following inputs (NOTE THE VALUES):

<input name="emails[]" value="email1">
<input name="emails[]" value="email2">

And also, let's suppose that I have 2 files in the queue, when I press the button and the data is being sent to PHP, I get the following when I print " $request->emails ":

array(
   'email1',
   'email2', //After this, since I uploaded two files, I get the same values again:
   'email1',
   'email2'  
)

Reading the dropzone documentation clearly states that this is the correct behaviour:

sending: Called just before each file is sent. Gets the xhr object and the formData objects as second and third parameters, so you can modify them (for example to add a CSRF token) or add additional data.

So, the problem is on my side, what can I do to prevent this when appending to formData ?

Answer 1

I solved the issue easily replacing the send event with sendingmultiple , this event should be used in most cases when the uploadMultiple option is set to true :

sendingmultiple: function(files, xhr, formData) {

            var formValues = $('#form-productos').serializeArray();
            $.each(formValues, function(i, obj){
               formData.append(obj.name, obj.value);
            });


        },

The difference is that this event receives a file array as first parameter, in this way, the process inside the event is only done once.