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

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.

Answer 2

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.

Answer 3

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