upload multiple files in one request Dropzone sending two requests

Question

I am trying to send multiple files in one request using DropZone js.

Here\'s my code :

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone(         


        

Answer 1

I can see it is very old post, however, I will answer hoping it might help someone.

2 requests

1. OPTIONS - no files
2. POST - with files

Chrome will do a pre-flight request(OPTIONS) to look for CORS headers. It is a standard which almost all latest browsers follow.

Answer 2

Had the same problem, just add autoDiscover: false, to your dropzone options and it should work!

My options are like this:

Dropzone.options.UploadZone = {        
    addRemoveLinks: true,
    autoDiscover: false,
    uploadMultiple: true,
    parallelUploads: 10,
    maxFiles: 10,
    acceptedFiles: ".jpeg,.jpg,.png",
    autoProcessQueue: false,
    ...

With autoProcessQueue: false and uploadMultiple: true: for each 2 files i was getting a request.

Then I added parallelUploads: 10 and maxFiles: 10 and i don't know why but my first 2 files started uploading as soon as i putted them on the dropzone, even with autoProcessQueue: false.

Then I just add autoDiscover: false and everything worked fine from there!

good look!

Answer 3

The enqueueForUpload property is deprecated and you should use autoProcessQueue instead. My hunch is that, since enqueueForUpload is no longer used and you don't set autoProcessQueue to false, the DropZone.js assumes that you want to send each file, as it is dropped on the component.

You should remove enqueueForUpload: false, set autoProcessQueue: false and after you've selected (i.e. dropped) all the files you need to upload, call the .processQueue() function, as described in the documentation.

Answer 4

I was also seeing multiple POSTs with 2 files being sent at a time (so, for instance, 2 separate POSTs for 4 files total).

I found the solution here: increasing parallelUploads. I now create the dropzone in the following way:

var myDropzone = new Dropzone('div#dz', {
  url: 'http://httpbin.org/post',
  uploadMultiple: true,
  parallelUploads: 10
});

Answer 5

The Issue was that I was using an input type="submit" which would do another post by itself, changing it to type button worked.

Answer 6

you can use uploadMultiple property default value false change it to true

$(".dropzone").dropzone({
            // autoQueue:false,
            parallelUploads:10,
            uploadMultiple:true,

https://www.dropzonejs.com/#config-uploadMultiple