convert images on upload

app/javascript/submission_form/dropzone.vue

@@ -51,6 +51,36 @@
 <script>
 import { IconCloudUpload, IconInnerShadowTop } from '@tabler/icons-vue'
 
+function convertImage (sourceFile, targetType, quality) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+
+    reader.onload = function (event) {
+      const img = new Image()
+
+      img.onload = function () {
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+
+        canvas.width = img.width
+        canvas.height = img.height
+        ctx.drawImage(img, 0, 0)
+        canvas.toBlob(function (blob) {
+          const ext = targetType === 'image/jpeg' ? '.jpg' : '.png'
+          const newFile = new File([blob], sourceFile.name.replace(/\.\w+$/, ext), { type: targetType })
+          resolve(newFile)
+        }, targetType, quality)
+      }
+
+      img.onerror = () => reject(new Error(`browser cannot decode ${sourceFile.type || sourceFile.name}`))
+
+      img.src = event.target.result
+    }
+    reader.onerror = reject
+    reader.readAsDataURL(sourceFile)
+  })
+}
+
 export default {
   name: 'FileDropzone',
   components: {
@@ -155,9 +185,9 @@ export default {
           } else {
             try {
               if (['image/bmp', 'image/vnd.microsoft.icon', 'image/svg+xml'].includes(file.type)) {
-                file = await this.convertImage(file, 'image/png')
+                file = await convertImage(file, 'image/png')
               } else if (['image/heic', 'image/heif', 'image/heic-sequence', 'image/heif-sequence', 'image/avif', 'image/avif-sequence'].includes(file.type)) {
-                file = await this.convertImage(file, 'image/jpeg', 0.9)
+                file = await convertImage(file, 'image/jpeg', 0.9)
               }
             } catch (e) {
               alert(e.message)
@@ -187,35 +217,6 @@ export default {
       }).finally(() => {
         this.isLoading = false
       })
-    },
-    convertImage (sourceFile, targetType, quality) {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader()
-
-        reader.onload = function (event) {
-          const img = new Image()
-
-          img.onload = function () {
-            const canvas = document.createElement('canvas')
-            const ctx = canvas.getContext('2d')
-
-            canvas.width = img.width
-            canvas.height = img.height
-            ctx.drawImage(img, 0, 0)
-            canvas.toBlob(function (blob) {
-              const ext = targetType === 'image/jpeg' ? '.jpg' : '.png'
-              const newFile = new File([blob], sourceFile.name.replace(/\.\w+$/, ext), { type: targetType })
-              resolve(newFile)
-            }, targetType, quality)
-          }
-
-          img.onerror = () => reject(new Error(`browser cannot decode ${sourceFile.type || sourceFile.name}`))
-
-          img.src = event.target.result
-        }
-        reader.onerror = reject
-        reader.readAsDataURL(sourceFile)
-      })
     }
   }
 }