CODEWITHSUNDEEP
javascriptfile-uploaddropzone.js
Konrad
Konrad

Reputation: 562

Combine normal form with file inputs with dropzone

I've a problem with combining "normal" form with dropzone. I've got a form with text inputs, file inputs and dropzone section. And I want post everything at once. So I'm creating dropzone field manually, I'm disabling autoProcessQueue feature of dropzone and binding to onClick of submit button.

<form action="/Exhibits/Create" enctype="multipart/form-data" id="newExhibitForm" method="post">
    <input id="Exhibit_Name" name="Exhibit.Name" type="text"
    <input id="Exhibit_Description" name="Exhibit.Description" type="text">

    <input id="ModelFile" name="ModelFile" type="file">
    <input id="TextureFile" name="TextureFile" type="file">

    <div id="dropzonePreview" class="dropzone-previews form-control dz-clickable">
        <div class="dz-message">Drag&drop</div>
    </div>

    <input type="submit" value="Create" class="btn btn-default">
</form>

JS part:

var photoDropzone = new Dropzone("#newExhibitForm", {
    url: $('#newExhibitForm').attr("action"),
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 10,
    maxFiles: 10,
    previewsContainer: '#dropzonePreview',
    clickable: '#dropzonePreview',

    // The setting up of the dropzone
    init: function () {
        var myDropzone = this;

        var submitButton = document.querySelector('input[type=submit]');
        myDropzone = this; // closure

        submitButton.addEventListener("click", function (e) {
            e.preventDefault();
            e.stopPropagation();
            if (myDropzone.getQueuedFiles().length === 0) {
                $('#newExhibitForm').submit();
            }
            else {
                myDropzone.processQueue();
            }
        });
    }
});

And when I submit my form by clicking submit button, in the server-side function there are dropzone files, text inputs, but file inputs aren't send.

Is there a way to make it work in the way I described at the beginning?

Regards,
Konrad

Upvotes: 3

Views: 2067

Answers (1)

enyo
enyo

Reputation: 16706

I am sorry, but at the time each file gets uploaded individually. So you would need to store the files separately on your server, and then when dropzone emits the complete event, you would send the rest of the input fields.

Upvotes: 0

Related Questions