Dropzone.js - prevent empty files from uploading to the server

Question

I know Dropzone supports the possibility to limit the file size to a certain number of MB (through maxFilesize) but is there a way to add a minFilesize ? This is because I don't want empty files to reach the server.

I see this is the point in the plugin which determines what to do with the file in case of a too big file size:

Dropzone.prototype.accept = function (file, done) {
            if (file.size > this.options.maxFilesize * 1024 * 1024) {
                return done(this.options.dictFileTooBig.replace("{{filesize}}", Math.round(file.size / 1024 / 10.24) / 100).replace("{{maxFilesize}}", this.options.maxFilesize));
            } else if (!Dropzone.isValidFile(file, this.options.acceptedFiles)) {
                return done(this.options.dictInvalidFileType);
            } else if ((this.options.maxFiles != null) && this.getAcceptedFiles().length >= this.options.maxFiles) {
                done(this.options.dictMaxFilesExceeded.replace("{{maxFiles}}", this.options.maxFiles));
                return this.emit("maxfilesexceeded", file);
            } else {
                return this.options.accept.call(this, file, done);
            }
        };

I know I could add an extra else if here to treat the minFilesize scenario but I'd like to stay out of the plugin's code and only do this 'externally' if possible, through the events emmited by the plugin.

Is this possible ?

Take a look at the "Bieber" example here: dropzonejs.com/#configuration See if using a file.size condition instead will do the trick. — LocEngineer
– LocEngineer, Commented Aug 27, 2015 at 8:56

gdvalderrama · Accepted Answer · 2017-01-26 11:21:36Z

8

According to http://www.dropzonejs.com/#configuration, something along the lines of this should do it:

Dropzone.options.myAwesomeDropzone = {
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
  accept: function(file, done) {
    if (file.size == 0) {
      done("Empty files will not be uploaded.");
    }
    else { done(); }
  }
};

edited Jan 26, 2017 at 11:21

gdvalderrama

8381 gold badge21 silver badges29 bronze badges

answered Aug 27, 2015 at 11:44

LocEngineer

2,9171 gold badge18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nadeeshan Herath · Accepted Answer · 2018-12-31 05:13:39Z

Following code works fine for me. But when the parameter maxFilesize: 500 is with accept function it gives me unpredictable results, Hence remove maxFileSize parameter if you are using it with accept function.

var emojiCustomizationDropzone = new Dropzone("#emojiCustomizationDropBox", {
paramName: "images",
accept: function(file, done) {
    if (file.size == 0) {
        done("Sorry, Your file is empty, Nothing to upload");
        return;
    } else if (file.size > MAX_UPLOAD_FILE_SIZE) {
        done("Sorry, Your file is too large to upload, Maximum file size is 500KB");
    }else {
        done();
    }
},
url: sampleURL,
uploadMultiple: true,
autoProcessQueue: false,
method: "POST",
enctype: "multipart/form-data",
headers: {
    contentType: false,
    processData: false,
    authorization: "Bearer " + $.cookie("Access_token")
},
    parallelUploads: 1,
    maxFiles: 1
});

This accept function does not prevent adding files to the dropbox for me. I can suggest another solution for this. We can add conditions we like to the onaddedfile method. if the files does not match we can user removeFile method from dropzone to remove it form respective dropzone.

emojiCustomizationDropzone.on("addedfile", function (file) {
if (file.size == 0) {
    emojiCustomizationDropzone.removeFile(file);
    return;
}
if (file.size > MAX_UPLOAD_FILE_SIZE) {
    emojiCustomizationDropzone.removeFile(file);
    return;
}
}

Hope this helps someone.

Collectives™ on Stack Overflow

Dropzone.js - prevent empty files from uploading to the server

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related