Pop toast on attempted attach if image attachment is too large

_locales/en/messages.json

@@ -549,6 +549,9 @@
   "fileSizeWarning": {
     "message": "Sorry, the selected file exceeds message size restrictions."
   },
+  "unableToLoadAttachment": {
+    "message": "Unable to load selected attachment."
+  },
   "disconnected": {
     "message": "Disconnected",
     "description":

js/views/file_input_view.js

@@ -24,6 +24,12 @@
       };
     },
   });
+  Whisper.UnableToLoadToast = Whisper.ToastView.extend({
+    render_attributes() {
+      return { toastMessage: i18n('unableToLoadAttachment') };
+    },
+  });
+
   Whisper.UnsupportedFileTypeToast = Whisper.ToastView.extend({
     template: i18n('unsupportedFileType'),
   });
@@ -88,14 +94,21 @@
       this.thumb.$('img')[0].onload = () => {
         this.$el.trigger('force-resize');
       };
+      this.thumb.$('img')[0].onerror = () => {
+        this.unableToLoadAttachment();
+      };
+    },
+
+    unableToLoadAttachment() {
+      const toast = new Whisper.UnableToLoadToast();
+      toast.$el.insertAfter(this.$el);
+      toast.render();
+
+      this.deleteFiles();
     },
 
     autoScale(file) {
-      if (
+      if (file.type.split('/')[0] !== 'image' || file.type === 'image/tiff') {
-        file.type.split('/')[0] !== 'image' ||
-        file.type === 'image/gif' ||
-        file.type === 'image/tiff'
-      ) {
         // nothing to do
         return Promise.resolve(file);
       }
@@ -111,14 +124,19 @@
           const maxHeight = 4096;
           const maxWidth = 4096;
           if (
-            img.width <= maxWidth &&
+            img.naturalWidth <= maxWidth &&
-            img.height <= maxHeight &&
+            img.naturalHeight <= maxHeight &&
             file.size <= maxSize
           ) {
             resolve(file);
             return;
           }
 
+          if (file.type === 'image/gif') {
+            reject(new Error('GIF is too large'));
+            return;
+          }
+
           const canvas = loadImage.scale(img, {
             canvas: true,
             maxWidth,
@@ -180,6 +198,9 @@
       const renderImagePreview = async () => {
         if (!MIME.isJPEG(file.type)) {
           this.previewObjectUrl = URL.createObjectURL(file);
+          if (!this.previewObjectUrl) {
+            throw new Error('Failed to create object url for image!');
+          }
           this.addThumb(this.previewObjectUrl);
           return;
         }
@@ -206,42 +227,51 @@
         this.addThumb('images/file.svg');
       }
 
-      const blob = await this.autoScale(file);
+      try {
-      let limitKb = 1000000;
+        const blob = await this.autoScale(file);
-      const blobType =
+        let limitKb = 1000000;
-        file.type === 'image/gif' ? 'gif' : contentType.split('/')[0];
+        const blobType =
-
+          file.type === 'image/gif' ? 'gif' : contentType.split('/')[0];
-      switch (blobType) {
+
-        case 'image':
+        switch (blobType) {
-          limitKb = 6000;
+          case 'image':
-          break;
+            limitKb = 6000;
-        case 'gif':
+            break;
-          limitKb = 25000;
+          case 'gif':
-          break;
+            limitKb = 25000;
-        case 'audio':
+            break;
-          limitKb = 100000;
+          case 'audio':
-          break;
+            limitKb = 100000;
-        case 'video':
+            break;
-          limitKb = 100000;
+          case 'video':
-          break;
+            limitKb = 100000;
-        default:
+            break;
-          limitKb = 100000;
+          default:
-          break;
+            limitKb = 100000;
-      }
+            break;
-      if ((blob.size / 1024).toFixed(4) >= limitKb) {
+        }
-        const units = ['kB', 'MB', 'GB'];
+        if ((blob.size / 1024).toFixed(4) >= limitKb) {
-        let u = -1;
+          const units = ['kB', 'MB', 'GB'];
-        let limit = limitKb * 1000;
+          let u = -1;
-        do {
+          let limit = limitKb * 1000;
-          limit /= 1000;
+          do {
-          u += 1;
+            limit /= 1000;
-        } while (limit >= 1000 && u < units.length - 1);
+            u += 1;
-        const toast = new Whisper.FileSizeToast({
+          } while (limit >= 1000 && u < units.length - 1);
-          model: { limit, units: units[u] },
+          const toast = new Whisper.FileSizeToast({
-        });
+            model: { limit, units: units[u] },
-        toast.$el.insertAfter(this.$el);
+          });
-        toast.render();
+          toast.$el.insertAfter(this.$el);
-        this.deleteFiles();
+          toast.render();
+          this.deleteFiles();
+        }
+      } catch (error) {
+        window.log.error(
+          'Error ensuring that image is properly sized:',
+          error && error.message ? error.message : error
+        );
+
+        this.unableToLoadAttachment();
       }
     },