upload multiple files in one request Dropzone send

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('#upload-Invoices', {       
    paramName: "files", 
    maxFilesize: 3.0, 
    maxFiles: 4,
    parallelUploads: 10000,
    uploadMultiple: true,
    autoProcessQueue: false
});

$('#btnUpload').on('click', function () {
    myDropzone.processQueue();
});

Controller :

public void FileUpload( IEnumerable<HttpPostedFileBase> file )
{
    // Do Something
}

View:

<form action="/Index/FileUpload"
      class="dropzone"
      id="upload-Invoices" data-ajax-method="POST" data-ajax="true">
    <input type="submit" value="Upload File to Server" id="btnUpload">
</form>

The files are being received although in diferrent requests, I want to send all files in one request, the Dropzone page has an option for it although it does not work. Thanks in Advance

Answer 1

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 2

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 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

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

Answer 5

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