CODEWITHSUNDEEP
dropzone.js
Joseph Crawford
Joseph Crawford

Reputation: 1500

Event Thrown when Filesize is Exceeded

Does DropZone throw an event when you have a max filesize setup and drop a file onto it that exceeds that limit? I have tried the following events but they do not seem to get triggered.

error, reset, addedfile, removedfile, dropped.

Currently our implementation doesn't do anything when you drop a file too large onto the zone. We would like to provide feedback that the file exceeded our max limit for file size.

Upvotes: 1

Views: 3005

Answers (2)

Qaiser Mehmood
Qaiser Mehmood

Reputation: 212

var dropZoneDiv = new Dropzone("div#DropZoneDiv", {
        url: "UPLOAD",
        previewTemplate: document.querySelector('#preview-template').innerHTML,
        thumbnailHeight: 100,
        thumbnailWidth: 100,
        addedfile: function (file) {
            if (file.size > (1024 * 1024 * 50)) // not more than 5mb
            {
                this.removeFile(file);
                abp.message.error("Only 50 mb file size is allowed");
            }
        },

Upvotes: 0

Pavan Kumar Jorrigala
Pavan Kumar Jorrigala

Reputation: 3085

It doesn't throw any event, it will return you an error message.

Code snippet from dropzone.js

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

http://www.dropzonejs.com/#config-dictFileTooBig

To throw the error message add maxFilesize: 2, // MB to the config

http://www.dropzonejs.com/#configuration

previewTemplate must contain div element with "dz-error-message" class

previewTemplate: '<div class="dz-preview dz-file-preview">
  <div class="dz-details">
    <div class="dz-filename"><span data-dz-name></span></div>
  <div class="dz-size" data-dz-size></div>
  <img data-dz-thumbnail />
 </div>
 <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
 <div class="dz-success-mark"><span>✔</span></div>
 <div class="dz-error-mark"><span>✘</span></div>
 <div class="dz-error-message"><span data-dz-errormessage></span>     </div>
 </div>'

http://www.dropzonejs.com/#layout

Upvotes: 2

Related Questions