convert images on upload

Dockerfile

@@ -48,7 +48,7 @@ ENV OPENSSL_CONF=/etc/openssl_legacy.cnf
 
 WORKDIR /app
 
-RUN apk add --no-cache libpq vips redis vips-heif onnxruntime
+RUN apk add --no-cache libpq vips redis onnxruntime
 
 RUN addgroup -g 2000 docuseal && adduser -u 2000 -G docuseal -s /bin/sh -D -h /home/docuseal docuseal
 

app/javascript/submission_form/dropzone.vue

@@ -153,8 +153,14 @@ export default {
               }
             })
           } else {
-            if (file.type === 'image/bmp' || file.type === 'image/vnd.microsoft.icon') {
+            try {
-              file = await this.convertBmpToPng(file)
+              if (['image/bmp', 'image/vnd.microsoft.icon', 'image/svg+xml'].includes(file.type)) {
+                file = await this.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)
+              }
+            } catch (e) {
+              alert(e.message)
             }
 
             formData.append('file', file)
@@ -182,7 +188,7 @@ export default {
         this.isLoading = false
       })
     },
-    convertBmpToPng (bmpFile) {
+    convertImage (sourceFile, targetType, quality) {
       return new Promise((resolve, reject) => {
         const reader = new FileReader()
 
@@ -197,15 +203,18 @@ export default {
             canvas.height = img.height
             ctx.drawImage(img, 0, 0)
             canvas.toBlob(function (blob) {
-              const newFile = new File([blob], bmpFile.name.replace(/\.\w+$/, '.png'), { type: 'image/png' })
+              const ext = targetType === 'image/jpeg' ? '.jpg' : '.png'
+              const newFile = new File([blob], sourceFile.name.replace(/\.\w+$/, ext), { type: targetType })
               resolve(newFile)
-            }, 'image/png')
+            }, targetType, quality)
           }
 
+          img.onerror = () => reject(new Error(`browser cannot decode ${sourceFile.type || sourceFile.name}`))
+
           img.src = event.target.result
         }
         reader.onerror = reject
-        reader.readAsDataURL(bmpFile)
+        reader.readAsDataURL(sourceFile)
       })
     }
   }