Large file upload - Request gets cancelled

Question

I am trying to upload video files of size 40-50mb. The progress bar freezes at a certain point and if i observe in my Networks tab on Google Chrome. The request gets cancelled and there is no error and the HTTP response header is empty.

However this is working for both image/video files which are around 10-15mb.

My code:

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#my-awesome-dropzone", {
        maxFiles: 1,
        parallelUploads: 100,
        acceptedFiles: '.3gp,.3gp2,.h261,.h263,.h264,.jpgv,.jpm,.jpgm,.mp4,.mp4v,.mpg4,.mpeg,.mpg,.mpe,.m1v,.m2v,.ogv,.qt,.mov,.fli,.flv,.mks,.mkv,.wmv,.avi,.movie,.smv,.g3,.jpeg,.jpg,.jpe,.png,.btif,.sgi,.svg,.tiff,.tif',
        previewTemplate: previewTemplate,
        previewsContainer: "#previews",
        autoProcessQueue: false,
        clickable: ".fileinput-button",
    });

P.S: It is not a server side issue as i have tried uploading without Dropzone and everything works smoothly.

score 34 · Answer 1 · answered Jul 20 '17 at 04:44

34

Did you use dropzone.js version >= 4.4.0 and ajax request?

If so, you must set the timeout (in ms) in your configuration. It's specify timeout value for xhr (ajax) request, and default value only 30s.

Source: http://www.dropzonejs.com/#configuration

answered Jul 20 '17 at 04:44

yahyaman

486
3
11

7

This is also true for 5.1.1, even though documentation clearly says it is set to null by default - it is not, and when you go to your console in the browser and type Dropzone.instances and than see the options you will see it is set to 30000ms: after this time it cancels the upload without any notice or message, it just hangs. – bwitkowicz Nov 02 '17 at 11:26
What about for dropzone 4.3? Timeout was added on 4.4 – gdvalderrama May 21 '18 at 14:41
1

@guival: I thought there should be similar option, although I'm not sure it was visible. Maybe you could try diving into dropzone's source code and share with us what you find. – yahyaman May 23 '18 at 07:06
1

In version 5.2.0, the Dropzone documentation now correctly states a default of 30 seconds. – mh8020 Dec 04 '18 at 18:35
For my setup - turning on chunking actually solved my timeout problem – Scott Aug 15 '19 at 15:56

score 14 · Answer 2 · answered Jan 17 '18 at 10:00

It has a timeout, whenever its exceded, the request gets cancelled, just put

timeout: 180000,

in options

It would be:

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#my-awesome-dropzone", {
        maxFiles: 1,
        timeout: 180000,
        parallelUploads: 100,
        acceptedFiles: '.3gp,.3gp2,.h261,.h263,.h264,.jpgv,.jpm,.jpgm,.mp4,.mp4v,.mpg4,.mpeg,.mpg,.mpe,.m1v,.m2v,.ogv,.qt,.mov,.fli,.flv,.mks,.mkv,.wmv,.avi,.movie,.smv,.g3,.jpeg,.jpg,.jpe,.png,.btif,.sgi,.svg,.tiff,.tif',
        previewTemplate: previewTemplate,
        previewsContainer: "#previews",
        autoProcessQueue: false,
        clickable: ".fileinput-button",
    });

score 12 · Answer 3 · answered Apr 02 '18 at 09:03

The first step is to check with the server as some time nginx or other server tools will look into the header for the file size and reject the file of certain size exceeding.

If the server is working fine then but due to network bandwidth issue. The server will still now give an error which needs to be handled by the client side. Here timeout comes into action.

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#my-dropzone", {
        maxFiles: 1,
        timeout: 9000, /*milliseconds*/
        autoProcessQueue: false
});

myDropzone.on("sending", function(file, xhr, formData) {
  /*Called just before each file is sent*/
        xhr.ontimeout = (() => {
          /*Execute on case of timeout only*/
            console.log('Server Timeout')
        });
}

Hamed Rajabi · Answer 4 · 2023-01-25T20:08:19.243

0

enable chunking and set parallelChunkUploads to false like this config

maxFilesize: 1000,//1000MB

parallelUploads: 1,

chunking: true, // enable chunking

forceChunking: false, // forces chunking when file.size < chunkSize

parallelChunkUploads: false,

chunkSize: 2000000 //// chunk size 2,000,000 bytes (~2MB)

edited Jan 25 '23 at 20:08

answered Jan 25 '23 at 19:34

Hamed Rajabi

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Ahmed Sbai Jan 28 '23 at 16:14

Large file upload - Request gets cancelled

4 Answers4

Linked