Can I submit a form with Dropzone without uploading any files?

Question

I've followed the Combine Dropzone With Normal Form tutorial to allow Dropzone uploads & form submit. The form is an application form, which should work both with & without files added. Currently it works only when one or more files are added to the Dropzone.

Is there an option I can enable to allow Dropzone to process the form submission even if the upload queue is empty?

Here's how I initialise the form:

                Dropzone.options.general = {
                paramName: 'tx_ddapplicationform_applicationformgeneral[form][files]', // The name that will be used to transfer the file
                autoProcessQueue: false,
                uploadMultiple: true,
                parallelUploads: 100,
                maxFiles: 100,
                addRemoveLinks: true,
                previewsContainer: '.dropzone-previews', // we specify on which div id we must show the files
                clickable: false,


                // The setting up of the dropzone
                init: function() {
                    var myDropzone = this;
                    console.log(myDropzone)
                    console.log("Dropzone init");

                    console.log(this.element.querySelector("input[type=submit]"))

                    // First change the button to actually tell Dropzone to process the queue.
                   this.element.querySelector("input[type=submit]").addEventListener("click", function(e) {
                        // Make sure that the form isn't actually being sent.
                        console.log("the button is clicked")
                        e.preventDefault();
                        e.stopPropagation();
                        myDropzone.processQueue();
                        console.log("after processQueue")
                    });

                    // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
                    // of the sending event because uploadMultiple is set to true.
                   this.on("sendingmultiple", function() {
                        console.log("sending multiple");
                    });
                    this.on("successmultiple", function(files, response) {
                        console.log("success multiple");
                    });
                    this.on("errormultiple", function(files, response) {
                        console.log("error multiple");
                    });
                }

I went through the dropzone.js form and added console.logs to see what was going on. A successful submit (with a file added) logs this:

 processQueue dropzone.js:1301
 upload multiple dropzone.js:1314
 sending multiple main.jquery.js:551
 after processQueue main.jquery.js:545
 success multiple main.jquery.js:554

An unsuccessful submit, without an attached file, logs this:

 processQueue dropzone.js:1301
 after processQueue main.jquery.js:545

Thousandth

Possible duplicate : DropZonejs: Submit form without files – Agbogla

how do you do on the server side to receive the images? I use php and I print $_FILES but it's empty. I don't know where to look for it... – Crumb

Answer 1

Ok, probably a necro post but since I'found this question in the first links of Google result page and since it has been viewed quite a lot I think that an answer will harm no one.

I have tha same structure and to solve the problem I just do:

$('#my-dropzone input[type="submit"]').on('click', function(
    // Make sure that the form isn't actually being sent.
    e.preventDefault();
    e.stopPropagation();
    if (myDropzone.files.length) {
        myDropzone.processQueue(); // upload files and submit the form
    } else {
        $('#my-dropzone').submit(); // just submit the form
    }
});

Mind that if you submit the form with dropzone (1st case) you are doing it through ajax so the result should be handled by the returned response, while, if you submit just the form (2nd case) you are going to have a normal form submit.

In my case this required a different response based on the type of submission.

Emalee

Answer 2

You should check if there are files in the queue. If the queue is empty call directly dropzone.uploadFile(). This method requires you to pass in a file. As stated on caniuse, the File constructor isn't supported on IE/Edge, so just use Blob API, as File API is based on that.

The formData.append() method used in dropzone.uploadFile() requires you to pass an object which implements the Blob interface. That's the reason why you cannot pass in a normal object.

dropzone version 5.2.0 requires the upload.chunked option

if (this.dropzone.getQueuedFiles().length === 0) {
    var blob = new Blob();
    blob.upload = { 'chunked': this.dropzone.defaultOptions.chunking };
    this.dropzone.uploadFile(blob);
} else {
    this.dropzone.processQueue();
}

Multipurpose