我可以使用Dropzone提交表格而无需上传任何文件吗？

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

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.

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();
}