Fix incorrect contentType/extension for outgoing resized image attachments

* Use contentType from conversion when resizing outgoing images

* Update outgoing filename with proper extension after resize

js/views/file_input_view.js

@@ -468,6 +468,7 @@
             return;
           }
 
+          const targetContentType = 'image/jpeg';
           const canvas = loadImage.scale(img, {
             canvas: true,
             maxWidth,
@@ -480,7 +481,7 @@
           do {
             i -= 1;
             blob = window.dataURLToBlobSync(
-              canvas.toDataURL('image/jpeg', quality)
+              canvas.toDataURL(targetContentType, quality)
             );
             quality = quality * maxSize / blob.size;
             // NOTE: During testing with a large image, we observed the
@@ -493,6 +494,8 @@
 
           resolve({
             ...attachment,
+            fileName: this.fixExtension(attachment.fileName, targetContentType),
+            contentType: targetContentType,
             file: blob,
           });
         };
@@ -500,6 +503,39 @@
       });
     },
 
+    getFileName(fileName) {
+      if (!fileName) {
+        return '';
+      }
+
+      if (!fileName.includes('.')) {
+        return fileName;
+      }
+
+      return fileName
+        .split('.')
+        .slice(0, -1)
+        .join('.');
+    },
+
+    getType(contentType) {
+      if (!contentType) {
+        return '';
+      }
+
+      if (!contentType.includes('/')) {
+        return contentType;
+      }
+
+      return contentType.split('/')[1];
+    },
+
+    fixExtension(fileName, contentType) {
+      const extension = this.getType(contentType);
+      const name = this.getFileName(fileName);
+      return `${name}.${extension}`;
+    },
+
     async getFile(attachment) {
       if (!attachment) {
         return Promise.resolve();