Merge pull request #3791 from sbsmith86/reportback-image-validation

Client side validation of image size

Author: sbsmith86

lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js

@@ -44,21 +44,47 @@ define(function(require) {
         return;
       }
 
-      // Open the modal.
-      Modal.open(_this.$cropModal,
-        {
-          animated: false,
-        }
-      );
-
-      // Add the preview image to the modal
-      _this.previewImage(files, _this.$imagePreview);
-
-      // Make sure submit button is enabled when the modal opens.
-      var $submitButton = _this.$cropModal.find(".-done");
-
-      if ($submitButton.prop("disabled")) {
-        $submitButton.prop("disabled", false);
+      if (/^image/.test( files[0].type)) {
+        var reader = new FileReader();
+        reader.readAsDataURL(files[0]);
+
+        reader.onloadend = function() {
+          var result = this.result;
+
+          var isValid = _this.validImage(result);
+          var $errorMsg = _this.$uploadButton.parent().siblings(".error");
+
+          if(isValid) {
+            // Remove any previously added error message.
+            if ($errorMsg.length) {
+              $errorMsg.remove();
+            }
+
+            // Open the modal.
+            Modal.open(_this.$cropModal,
+              {
+                animated: false,
+              }
+            );
+
+            // Add the preview image to the modal
+            _this.previewImage(result, _this.$imagePreview);
+
+            // Make sure submit button is enabled when the modal opens.
+            var $submitButton = _this.$cropModal.find(".-done");
+
+            if ($submitButton.prop("disabled")) {
+              $submitButton.prop("disabled", false);
+            }
+          }
+          // Show user an error if they upload an image that is too small.
+          else {
+            if (!$errorMsg.length) {
+              var $error = $("<div class='messages error'>Please upload a larger photo. Min. size is 480px by 480px.</div>");
+              $error.insertAfter(_this.$uploadButton.parent());
+            }
+          }
+        };
       }
     });
 
@@ -73,6 +99,16 @@ define(function(require) {
     });
   };
 
+  /**
+   * Validates image size.
+   */
+  ImageUploadBeta.prototype.validImage = function(fileReaderResult) {
+    var image = new Image();
+    image.src = fileReaderResult;
+
+    return (image.width > 480 && image.height > 480);
+  };
+
   /**
    * Resizes an image so that the dimensions of the scaled image.
    * are never greater than it's container's maximum width (height of the container is variable).
@@ -103,42 +139,35 @@ define(function(require) {
    * Creates a preview image of an uploaded file and adds it to a container.
    * If cropping is enabled, it initiates the cropping script.
    *
-   * @param {jQuery} files           An object representing a file.
-   * @param {jQuery} $imageContainer The DOM element to put the preview image in.
+   * @param {jQuery} fileReaderResult   The result property of a file reader object.
+   * @param {jQuery} $imageContainer    The DOM element to put the preview image in.
    */
-  ImageUploadBeta.prototype.previewImage = function(files, $imageContainer) {
+  ImageUploadBeta.prototype.previewImage = function(fileReaderResult, $imageContainer) {
+    var _this = this;
+
     var $preview = $("<img class='preview' src=''>");
     $imageContainer.html($preview);
 
-    if (/^image/.test( files[0].type)) {
-      var reader = new FileReader();
-      reader.readAsDataURL(files[0]);
-      var _this = this;
-
-      reader.onloadend = function() {
-        var result = this.result;
-        $preview.attr("src", result).load(function() {
-          var $this = $(this);
+    $preview.attr("src", fileReaderResult).load(function() {
+      var $this = $(this);
 
-          _this.resizeImage($this, $imageContainer);
+      _this.resizeImage($this, $imageContainer);
 
-          // Initiate cropping if it is enabled.
-          if (_this.cropEnabled) {
-            _this.cropInit(result);
-          }
-        });
-      };
-    }
+      // Initiate cropping if it is enabled.
+      if (_this.cropEnabled) {
+        _this.cropInit(fileReaderResult);
+      }
+    });
   };
 
   /**
    * Initiates cropping on a file.
    *
-   * @param {jQuery} result  The result property of a file reader object.
+   * @param {jQuery} fileReaderResult  The result property of a file reader object.
    */
-  ImageUploadBeta.prototype.cropInit = function(result) {
+  ImageUploadBeta.prototype.cropInit = function(fileReaderResult) {
     var originalImage = new Image();
-    originalImage.src = result;
+    originalImage.src = fileReaderResult;
 
     ImageCrop.dsCropperInit(originalImage);
   };