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('#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

Evante

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.

Evante

Weird I have the exact same issue but input type=button doesn't fix it for me. I had to add parallelUploads: 10 to get it working, because paralledUploads defaults to 2 files only. – Niphablepsia

Answer 2

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

Chibouk

"you can use uploadMultiple property"... the example code in the question already has uploadMultiple: true. – Srini

Answer 3

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!

Substrate

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

Innutrition

Probably also good to set maxFiles: 10 so the user does not go over your parallel limit and trigger another HTTP request. – Srini

Answer 5

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.

Connel

That's really weird. Sorry, I don't have any more ideas. – Connel

However, one has files in the post, the second request does not. – Evante

Are you posting the form as well? I'm no DropZone.js expert but it could be that the processQueue() function posts the form. And another thing, what happens if you set enctype="multipart/form-data"on your form? – Connel

Its some type of encoding and is necessary when you are dealing with uploads – Evante

That's the standard way of uploading files in ASP.MVC. That's why I asked if you tried setting the correct enctype. – Connel

Was this resolved? i'm getting two requests as well. one with files, one without – Journalistic

I solved this by increasing parallelUploads -- see other answer posted to this question – Innutrition

Answer 6

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.

Velure