Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dropzone.js event after drop end and before uploading

I'm looking for a dropzone.js event that raises after the drop end and just before the uploading.

What I need is to have access to all the information about the dropped files at once, not file by file thus addedfile event is not an option.

I thought that the dragend event was the appropriate, but it's not triggered when I drop the files in my dropzone.

The code snippet that I'm using looks like as follows:

Dropzone.options.myDropzone = {
    // Prevents Dropzone from uploading dropped files immediately
    autoProcessQueue : false,
    dictDefaultMessage: "Drop files or click here to upload a new DICOM series ...",
    init : function() {

        myDropzone = this;

        //Restore initial message when queue has been completed
        this.on("dragend", function(file) {
            console.log("ondragend");            
        });

    }

};

Am I missing something? Is there any other event in dropzone.js for this purpose?

like image 207
ralvarez Avatar asked Dec 25 '22 13:12

ralvarez


2 Answers

There is an event called addedfiles, which will fire on both "drag-and-drop" and manual file selection.

this.on("addedfiles", function(files) {
     console.log(files.length + ' files added');
});
like image 152
SimZal Avatar answered Dec 27 '22 03:12

SimZal


If you want to have a callback for the drop event, you should use 'drop'. In the event take a look at the 'files' Array. But be aware, that this event isn't fired if the user clicks at the dropzone and selects a file from there.

Dropzone.options.MyDropzone = {
    autoProcessQueue : false,
    dictDefaultMessage: "Drop files or click here to upload a new DICOM series ...",
    init : function() {

        myDropzone = this;

        //Restore initial message when queue has been completed
        this.on("drop", function(event) {
            console.log(myDropzone.files);            
        });

    }
};

See this fiddle for example: jsfiddle.net/qqkbzv5a/2/

like image 26
El Devoper Avatar answered Dec 27 '22 04:12

El Devoper