Combine normal form with multiple dropzones

Question

I want to have multiple dropzones in a form. So I created a form

<form method="post">
    <div class="upload-files" data-name="mainImages[]" />
    <div class="upload-files" data-name="secImages[]" />
    <!-- could also be more -->

    <input type="text" name="test" />

    <input type="submit" />
</form>

The dropzones are initialized with its own paramName.

var dropzones = [];
$('.upload-files').each(function() {
    dropzones.push(new Dropzone('#' + $dropzone.attr('id'), {
       paramName: $(this).data('name'),
       // ...
    }
);

this.dropzones = dropzones;

How to submit multiple dropzones with the form data in one request? Currently it look like this on submit.

// submit
if (this.dropzones.length) {
    return true; // normal form submit without dropzone
}

// dropzone submit form
for (var i = 0, length = this.dropzones.length; i < length; i++) {
    // TODO combine files with correct paramNames
}

I know this https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone but this is only for one dropzone in one form.

What I think I need todo is to add the files from the second, third, ... dropzone to the first when submitting but I dont know how to handle that.

Answer 1

I found a solution to work with multiple dropzones, on the form submit you need to do the following.

if (!this.dropzones.length) {
    // default form submit
    return true;
}

// submit over dropzone
event.preventDefault();
this.dropzones[0].processQueue();

return false;

This will process the first dropzone. Now we need to add the other dropzones files to the submit in the sendingmultiple event

init: function() {
    this.on('sendingmultiple', function(data, xhr, formData) {
        // add other form fields
        $.each($form.serializeArray(), function(index, item) {
            formData.append(item.name, item.value);
        });

        // add other dropzone files
        for (var i = 1, length = this.dropzones.length; i < length; i++) {
            var files = this.dropzones[i].getQueuedFiles();

            for (var x = 0, fileLength = files.length; x < fileLength; x++) {
                formData.append(
                    this.dropzones[i]._getParamName(x),
                    files[x],
                    files[x].name
                );
            }
        }
    });
}