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

score 13 · Answer 1 · answered Nov 10 '18 at 07:26

13

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

answered Nov 10 '18 at 07:26

ahmedkandil

477
3
6

2

*"you can use uploadMultiple property"*... the example code in the question already has `uploadMultiple: true`. – Dem Pilafian Jan 05 '19 at 09:35

score 11 · Accepted Answer · edited Aug 26 '19 at 11:48

11

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

edited Aug 26 '19 at 11:48

someoneuseless

303
3
17

answered Jan 19 '15 at 11:26

SJMan

1,547
2
14
37

3

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. – StackThis Feb 12 '16 at 15:07

score 4 · Answer 3 · answered Apr 10 '18 at 19:48

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

answered Apr 10 '18 at 19:48

Greg Sadetsky

4,863
1
38
48

1

Probably also good to set `maxFiles: 10` so the user does not go over your parallel limit and trigger another HTTP request. – Dem Pilafian Jan 05 '19 at 09:32

score 4 · Answer 4 · answered Apr 30 '20 at 16:11

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!

score 2 · Answer 5 · answered Jan 19 '15 at 10:42

2

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.

answered Jan 19 '15 at 10:42

Andrei V

7,306
6
44
64

That's really weird. Sorry, I don't have any more ideas. – Andrei V Jan 19 '15 at 10:55
However, one has files in the post, the second request does not. – SJMan Jan 19 '15 at 10:57
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? – Andrei V Jan 19 '15 at 10:59
Its some type of encoding and is necessary when you are dealing with uploads – SJMan Jan 19 '15 at 11:06
That's the standard way of uploading files in ASP.MVC. That's why I asked if you tried setting the correct `enctype`. – Andrei V Jan 19 '15 at 11:08
Was this resolved? i'm getting two requests as well. one with files, one without – bir singh Jul 01 '15 at 17:09
I solved this by increasing `parallelUploads` -- see other answer posted to this question – Greg Sadetsky Apr 10 '18 at 19:48

score 0 · Answer 6 · answered Nov 19 '18 at 18:06

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

2 requests

OPTIONS - no files

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.

upload multiple files in one request Dropzone sending two requests

6 Answers6

Linked