Merge pull request JeremyFagis#35 from JeremyFagis/maxFileSize

Worked on max filesize for the preview image.

Author: JeremyFagis

README.md

@@ -150,6 +150,20 @@ $('.dropify').dropify();
 ```
 
 
+* __allowedFileExtensions:__  You can allow only some file extensions. If you add the attr __data-allowed-file-extensions="pdf png psd"__ only PDF, PNG and PSD files will be allowed. By default, everything is allowed. Default: ['*'].
+
+```html
+<input type="file" class="dropify" data-allowed-file-extensions="pdf png psd" />
+```
+
+
+* __maxFileSizePreview:__  Set the max filesize of the previewed document (if it's an image). If the file size is bigger than the option, it will be only the file icon and disabled the preview. You can use unit like K, M and G.
+
+```html
+<input type="file" class="dropify" data-max-file-size-preview="3M" />
+```
+
+
 * __messages:__  You can translate default messages. You juste have to add an options array when you init the plugin. This messages will be replaced in the __tpl__ option.
 
 ```javascript

dist/css/demo.css

@@ -1,6 +1,6 @@
 /*!
  * =============================================================
- * dropify v0.2.0 - Override your input files with style.
+ * dropify v0.2.1 - Override your input files with style.
  * https://github.com/JeremyFagis/dropify
  *
  * (c) 2016 - Jeremy FAGIS <[email protected]> (http://fagis.fr)

dist/css/dropify.css

@@ -1,6 +1,6 @@
 /*!
  * =============================================================
- * dropify v0.2.0 - Override your input files with style.
+ * dropify v0.2.1 - Override your input files with style.
  * https://github.com/JeremyFagis/dropify
  *
  * (c) 2016 - Jeremy FAGIS <[email protected]> (http://fagis.fr)

dist/css/dropify.min.css

@@ -1,6 +1,6 @@
 /*!
  * =============================================================
- * dropify v0.2.0 - Override your input files with style.
+ * dropify v0.2.1 - Override your input files with style.
  * https://github.com/JeremyFagis/dropify
  *
  * (c) 2016 - Jeremy FAGIS <[email protected]> (http://fagis.fr)
@@ -41,8 +41,10 @@ function Dropify(element, options) {
         showErrors: true,
         errorTimeout: 3000,
         errorsPosition: 'overlay',
+        imgFileExtensions: ['png', 'jpg', 'jpeg', 'gif', 'bmp'],
+        maxFileSizePreview: "5M",
         allowedFormats: ['portrait', 'square', 'landscape'],
-		allowedFileExtensions: ['*'],
+        allowedFileExtensions: ['*'],
         messages: {
             'default': 'Drag and drop a file here or click',
             'replace': 'Drag and drop or click to replace',
@@ -70,17 +72,16 @@ function Dropify(element, options) {
         }
     };
 
-    this.element           = element;
-    this.input             = $(this.element);
-    this.wrapper           = null;
-    this.preview           = null;
-    this.filenameWrapper   = null;
-    this.settings          = $.extend(true, defaults, options, this.input.data());
-    this.imgFileExtensions = ['png', 'jpg', 'jpeg', 'gif', 'bmp'];
-    this.errorsEvent       = $.Event('dropify.errors');
-    this.isDisabled        = false;
-    this.isInit            = false;
-    this.file              = {
+    this.element            = element;
+    this.input              = $(this.element);
+    this.wrapper            = null;
+    this.preview            = null;
+    this.filenameWrapper    = null;
+    this.settings           = $.extend(true, defaults, options, this.input.data());
+    this.errorsEvent        = $.Event('dropify.errors');
+    this.isDisabled         = false;
+    this.isInit             = false;
+    this.file               = {
         object: null,
         name: null,
         size: null,
@@ -93,6 +94,10 @@ function Dropify(element, options) {
         this.settings.allowedFormats = this.settings.allowedFormats.split(' ');
     }
 
+    if (!Array.isArray(this.settings.allowedFileExtensions)) {
+        this.settings.allowedFileExtensions = this.settings.allowedFileExtensions.split(' ');
+    }
+
     this.onChange     = this.onChange.bind(this);
     this.clearElement = this.clearElement.bind(this);
     this.onFileReady  = this.onFileReady.bind(this);
@@ -165,9 +170,9 @@ Dropify.prototype.createElements = function()
 
     var defaultFile = this.settings.defaultFile || '';
 
-    if (defaultFile.trim() != '') {
+    if (defaultFile.trim() !== '') {
         this.file.name = this.cleanFilename(defaultFile);
-        this.setPreview(defaultFile);
+        this.setPreview(this.isImage(), defaultFile);
     }
 };
 
@@ -188,46 +193,43 @@ Dropify.prototype.readFile = function(input)
 
         this.clearErrors();
         this.showLoader();
-
         this.setFileInformations(file);
-        reader.readAsDataURL(file);
-
         this.errorsEvent.errors = [];
-
         this.checkFileSize();
-		
 		this.isFileExtensionAllowed();
 
-        reader.onload = function(_file) {
-            srcBase64 = _file.target.result;
-            if (this.isImage()) {
+        if (this.isImage() && this.file.size < this.sizeToByte(this.settings.maxFileSizePreview)) {
+            this.input.on('dropify.fileReady', this.onFileReady);
+            reader.readAsDataURL(file);
+            reader.onload = function(_file) {
+                srcBase64 = _file.target.result;
                 image.src = _file.target.result;
                 image.onload = function() {
                     _this.setFileDimensions(this.width, this.height);
                     _this.validateImage();
-                    _this.input.trigger(eventFileReady, [srcBase64]);
+                    _this.input.trigger(eventFileReady, [true, srcBase64]);
                 };
-            } else {
-                this.input.trigger(eventFileReady, [srcBase64]);
-            }
-        }.bind(this);
 
-        this.input.on('dropify.fileReady', this.onFileReady);
+            }.bind(this);
+        } else {
+            this.onFileReady(false);
+        }
     }
 };
 
 /**
  * On file ready to show
  *
  * @param  {Event} event
+ * @param  {Bool} previewable
  * @param  {String} src
  */
-Dropify.prototype.onFileReady = function(event, src)
+Dropify.prototype.onFileReady = function(event, previewable, src)
 {
     this.input.off('dropify.fileReady', this.onFileReady);
 
     if (this.errorsEvent.errors.length === 0) {
-        this.setPreview(src, this.file.name);
+        this.setPreview(previewable, src);
     } else {
         this.input.trigger(this.errorsEvent, [this]);
         for (var i = this.errorsEvent.errors.length - 1; i >= 0; i--) {
@@ -281,17 +283,17 @@ Dropify.prototype.setFileDimensions = function(width, height)
  *
  * @param {String} src
  */
-Dropify.prototype.setPreview = function(src)
+Dropify.prototype.setPreview = function(previewable, src)
 {
     this.wrapper.removeClass('has-error').addClass('has-preview');
     this.filenameWrapper.children('.dropify-filename-inner').html(this.file.name);
     var render = this.preview.children('.dropify-render');
 
     this.hideLoader();
 
-    if (this.isImage() === true) {
+    if (previewable === true) {
         var imgTag = $('<img />').attr('src', src);
-        
+
         if (this.settings.height) {
             imgTag.css("max-height", this.settings.height);
         }
@@ -332,7 +334,7 @@ Dropify.prototype.cleanFilename = function(src)
         filename = src.split('/').pop();
     }
 
-    return src != "" ? filename : '';
+    return src !== "" ? filename : '';
 };
 
 /**
@@ -388,9 +390,9 @@ Dropify.prototype.setContainerSize = function()
  */
 Dropify.prototype.isTouchDevice = function()
 {
-    return (('ontouchstart' in window)
-         || (navigator.MaxTouchPoints > 0)
-         || (navigator.msMaxTouchPoints > 0));
+    return (('ontouchstart' in window) ||
+            (navigator.MaxTouchPoints > 0) ||
+            (navigator.msMaxTouchPoints > 0));
 };
 
 /**
@@ -410,7 +412,7 @@ Dropify.prototype.getFileType = function()
  */
 Dropify.prototype.isImage = function()
 {
-    if (this.imgFileExtensions.indexOf(this.getFileType()) != "-1") {
+    if (this.settings.imgFileExtensions.indexOf(this.getFileType()) != "-1") {
         return true;
     }
 
@@ -424,15 +426,14 @@ Dropify.prototype.isImage = function()
 */
 Dropify.prototype.isFileExtensionAllowed = function () {
 
-	if (this.settings.allowedFileExtensions.indexOf('*') != "-1") {
-		return true;
-	} else if (this.settings.allowedFileExtensions.indexOf(this.getFileType()) != "-1") {
+	if (this.settings.allowedFileExtensions.indexOf('*') != "-1" || 
+        this.settings.allowedFileExtensions.indexOf(this.getFileType()) != "-1") {
 		return true;
 	}
 	this.pushError("fileExtension");
 
 	return false;
-}
+};
 
 /**
  * Translate messages if needed.
@@ -451,7 +452,7 @@ Dropify.prototype.translateMessages = function()
  */
 Dropify.prototype.checkFileSize = function()
 {
-    if (this.maxFileSizeToByte() !== 0 && this.file.size > this.maxFileSizeToByte()) {
+    if (this.sizeToByte(this.settings.maxFileSize) !== 0 && this.file.size > this.sizeToByte(this.settings.maxFileSize)) {
         this.pushError("fileSize");
     }
 };
@@ -461,22 +462,22 @@ Dropify.prototype.checkFileSize = function()
  *
  * @return {Int} value
  */
-Dropify.prototype.maxFileSizeToByte = function()
+Dropify.prototype.sizeToByte = function(size)
 {
     var value = 0;
 
-    if (this.settings.maxFileSize !== 0) {
-        var unit  = this.settings.maxFileSize.slice(-1).toUpperCase(),
+    if (size !== 0) {
+        var unit  = size.slice(-1).toUpperCase(),
             kb    = 1024,
             mb    = kb * 1024,
             gb    = mb * 1024;
 
         if (unit === 'K') {
-            value = parseFloat(this.settings.maxFileSize) * kb;
+            value = parseFloat(size) * kb;
         } else if (unit === 'M') {
-            value = parseFloat(this.settings.maxFileSize) * mb;
+            value = parseFloat(size) * mb;
         } else if (unit === 'G') {
-            value = parseFloat(this.settings.maxFileSize) * gb;
+            value = parseFloat(size) * gb;
         }
     }
 
@@ -583,7 +584,7 @@ Dropify.prototype.getError = function(errorKey)
     } else if (errorKey === 'maxHeight') {
         value = this.settings.maxHeight;
     } else if (errorKey === 'imageFormat') {
-        value = this.settings.allowedFormats.join(' ');
+        value = this.settings.allowedFormats.join(', ');
     } else if (errorKey === 'fileExtension') {
 		value = this.settings.allowedFileExtensions.join(', ');
 	}