Only preview image files and less than 20mb

dist/js/dropify.js

@@ -7,6 +7,24 @@
  * =============================================================
  */
 
+;(function(root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(['jquery'], factory);
+  } else if (typeof exports === 'object') {
+    module.exports = factory(require('jquery'));
+  } else {
+    root.Dropify = factory(root.jQuery);
+  }
+}(this, function($) {
+/*!
+ * =============================================================
+ * dropify v0.2.0 - Override your input files with style.
+ * https://github.com/JeremyFagis/dropify
+ *
+ * (c) 2016 - Jeremy FAGIS <jeremy@fagis.fr> (http://fagis.fr)
+ * =============================================================
+ */
+
 ;(function(root, factory) {
   if (typeof define === 'function' && define.amd) {
     define(['jquery'], factory);
@@ -164,7 +182,7 @@ Dropify.prototype.createElements = function()
 
     if (defaultFile.trim() != '') {
         this.file.name = this.cleanFilename(defaultFile);
-        this.setPreview(defaultFile);
+        this.setPreview(this.isImage(),defaultFile);
     }
 };
 
@@ -187,27 +205,28 @@ Dropify.prototype.readFile = function(input)
         this.showLoader();
 
         this.setFileInformations(file);
-        reader.readAsDataURL(file);
 
         this.errorsEvent.errors = [];
 
         this.checkFileSize();
 
-        reader.onload = function(_file) {
-            srcBase64 = _file.target.result;
-            if (this.isImage()) {
-                image.src = _file.target.result;
-                image.onload = function() {
-                    _this.setFileDimensions(this.width, this.height);
-                    _this.validateImage();
-                    _this.input.trigger(eventFileReady, [srcBase64]);
-                };
-            } else {
-                this.input.trigger(eventFileReady, [srcBase64]);
-            }
-        }.bind(this);
-
-        this.input.on('dropify.fileReady', this.onFileReady);
+        // Only preview images less than 20mb, otherwise the browser will be very slow or crash completely
+        if (this.isImage() && this.file.size < 20000000) {
+            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, [true, srcBase64]);
+                    };
+
+            }.bind(this);
+        } else {
+            this.onFileReady(false);
+        }
     }
 };
 
@@ -217,12 +236,12 @@ Dropify.prototype.readFile = function(input)
  * @param  {Event} event
  * @param  {String} src
  */
-Dropify.prototype.onFileReady = function(event, src)
+Dropify.prototype.onFileReady = function(event, showImage, src)
 {
     this.input.off('dropify.fileReady', this.onFileReady);
 
     if (this.errorsEvent.errors.length === 0) {
-        this.setPreview(src, this.file.name);
+        this.setPreview(showImage, src);
     } else {
         this.input.trigger(this.errorsEvent, [this]);
         for (var i = this.errorsEvent.errors.length - 1; i >= 0; i--) {
@@ -276,15 +295,15 @@ Dropify.prototype.setFileDimensions = function(width, height)
  *
  * @param {String} src
  */
-Dropify.prototype.setPreview = function(src)
+Dropify.prototype.setPreview = function(showImage,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 (showImage === true) {
         var imgTag = $('<img />').attr('src', src);
 
         if (this.settings.height) {
@@ -630,3 +649,5 @@ $.fn[pluginName] = function(options) {
 
 return Dropify;
 }));
+return Dropify;
+}));