How do I refresh the page after dropzone,js upload?

Question

I'm using dropzone.js to enable drag and drop to my fileupload.

I've set autoProcessQueues to false, and I'm running the processQueue command on all files added to the upload container.

Is there any way to refresh the page after all of the files has been processed? I cant se any callback function in the processQueue function..

Josh · Answer 1 · 2015-11-24T23:44:13.427

23

Here is a complete solution combining the other contributors solutions where dropzoneJsForm is the id of your dropzone form. This script runs on page load and initialises the dropzone with these options. (I did not disable autodiscover).

// Initialise DropZone form control
// dropzoneJsForm = the id of your dropzone form
Dropzone.options.dropzoneJsForm = {
    maxFilesize: 10, // Mb
    init: function () {
        // Set up any event handlers
        this.on('completemultiple', function () {
            location.reload();
        });
    }
};

Edit: There is now a completemultiple event so you don't need to check the queue lengths.

edited Nov 24 '15 at 23:44

answered Oct 19 '14 at 19:55

Josh

3,442
2
23
24

Works perfectly – Irfan Ashraf Dec 06 '16 at 07:41
This worked for me, but with "complete" instead of "completemultiple" – Brad Ahrens Sep 15 '17 at 15:05

score 10 · Answer 2 · answered Jan 27 '16 at 13:20

There is no need for you to check manually if all the files have been uploaded. There is a default function provided by Dropzone, and it fires once all the files have been processed in the queue. Use queuecomplete to your advantage.

use this:

this.on("queuecomplete", function (file) {
      location.reload();
  });

score 7 · Answer 3 · edited Sep 29 '15 at 17:17

Here is what you need to do exactly.

Init your plugin.

Dropzone.autoDiscover = false;

this line is used to turn off auto discovery of dropzone.

    var md = new Dropzone(".mydropzone", {
        url: "/user/upload/", # your post url
        maxFilesize: "5", #max file size for upload, 5MB
        addRemoveLinks: true # Add file remove button.
    });

Bind Complete method

    md.on("complete", function (file) {
        if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
            alert('Your action, Refresh your page here. ');
        }

        md.removeFile(file); # remove file from the zone.
    });

I hope this helps.

gandarez · Answer 4 · 2013-09-24T00:22:06.907

1

Try handling the event 'complete'.

$dropzone.on('complete', function () {
    location.reload();
});

Dropzone.js Wiki

edited Sep 24 '13 at 00:22

answered Sep 24 '13 at 00:16

gandarez

2,609
4
34
47

2

don't use "complete" if you are allowing more than one file to upload without checking to see if the entire queue is processed. – DanJGer Jan 23 '14 at 00:17

score 1 · Answer 5 · edited Oct 06 '20 at 07:57

I know it is an old question but i like to share what worked for me.

Dropzone.options.myDropzone = {
    paramName: 'file',
    maxFilesize: 5, // MB
    maxFiles: 18,
    acceptedFiles: "image/*",
    init: function () {
    this.on("queuecomplete", function (file) {
    $( "#leo" ).load(window.location.href + " #leo" );});}},

here i reload the div instead of reloading the whole page.. if you wanna reload the whole page then use location.reload();

score 0 · Answer 6 · edited May 17 '18 at 10:59

I would use completeMultiple handler but you have to properly handle the uploads as an array of file[] or files[]. If you really don't want to deal with that then either set maxFiles: 1 or check the queue to be sure nothing else is uploading so that the page refresh cancels anything pending. You can check the queue using:

if (myDropzone.getQueuedFiles().length == 0 && myDropzone.getUploadingFiles().length == 0)

How do I refresh the page after dropzone,js upload?

6 Answers6

Init your plugin.

Bind Complete method