CODEWITHSUNDEEP
javascriptdropzone.js
Floris
Floris

Reputation: 3155

Dropzonejs trigger error and cancel upload

i'm using Dropzonejs and what I would like to do is essentially simple. But I can't find any article about it.

So on sending the file we trigger an error on nasty .exe and .php files. The dropzonejs interface show an X and and error message. So that's correct. The problem is that it still gets thrown into the on success event, and gets uploaded.

uploader.on("sending", function (file, xhr, data) {

    var aDeny = [ // deny file some extensions by default
        'application/x-msdownload',
        'text/php'
    ];

    if($.inArray(file.type, aDeny) !== -1) {
        this.defaultOptions.error(file, 'File not allowed: ' + file.name);
        return false;
    }
});

Evil.exe still appears in this success event and gets uploaded. The response only has a string of the file path and file.status is success.

uploader.on('success', function (file, response) {

    getData({'dostuff'});

    return file.previewElement.classList.add("dz-success");
});

So in my 'sending' event, how can I prevent the file from appearing in the success event?

UPDATE:

Thanks! This is what I needed in the end:

var aDeny = [ // deny file some extensions by default
    'application/x-msdownload',
    'text/php'
];

Dropzone.options.uploadWidget = {
    // more config...
    accept: function (file, done) {
        if ($.inArray(file.type, aDeny) !== -1) {
            done("This file is not accepted!");
        }
        else {
            done();
        }
    }
}

Upvotes: 3

Views: 3609

Answers (1)

codtex
codtex

Reputation: 6558

I would first of all always check the file type on the server side to prevent any problems.

Then to filter file types with Dropzone you can use:

The default implementation of accept checks the file's mime type or extension against this list. This is a comma separated list of mime types or file extensions.

Eg.: image/*,application/pdf,.psd

If the Dropzone is clickable this option will also be used as accept parameter on the hidden file input as well.

Sample:

var myDropzone = new Dropzone("div#myId", { 
    url: "/file/post",
    acceptedFiles: 'application/x-msdownload,text/php'
});

A function that gets a file and a done function as parameters.

If the done function is invoked without arguments, the file is "accepted" and will be processed. If you pass an error message, the file is rejected, and the error message will be displayed. This function will not be called if the file is too big or doesn't match the mime types.

Sample:

Dropzone.options.myAwesomeDropzone = {
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
  accept: function(file, done) {
    if (file.name == "justinbieber.jpg") {
      done("This file is not accepted!");
    }
    else { done(); }
  }
};

Upvotes: 2

Related Questions