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

Millrun

Answer 1

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.

Hodden

Works perfectly – Residentiary

This worked for me, but with "complete" instead of "completemultiple" – Alcides

It looks like the completemultiple event isn't triggered anymore. I had to use the complete event and check the queue. – Hadsall

Answer 2

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

Coupon

Answer 3

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.

Aphasic

Answer 4

Try handling the event 'complete'.

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

Dropzone.js Wiki

Nudnik

don't use "complete" if you are allowing more than one file to upload without checking to see if the entire queue is processed. – Abrego

Answer 5

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

Incompletion

Answer 6

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)

Abrego