Compress profile pictures on upload

src/app/editor/index.ts

@@ -17,6 +17,7 @@ import {Editor, MentionSuggestion, WelshmanExtension} from "@welshman/editor"
 import {makeMentionNodeView} from "./MentionNodeView"
 import ProfileSuggestion from "./ProfileSuggestion.svelte"
 import {pushToast} from "@app/util/toast"
+import {stripExifData} from "@src/lib/html"
 
 export const getBlossomServer = () => {
   const userUrls = getTagValues("server", getListTags(userBlossomServers.get()))
@@ -73,23 +74,7 @@ export const makeEditor = async ({
                 let file: Blob = attrs.file
 
                 if (!file.type.match("image/(webp|gif)")) {
-                  const {default: Compressor} = await import("compressorjs")
-
-                  file = await new Promise((resolve, _reject) => {
-                    new Compressor(file, {
-                      maxWidth: 1024,
-                      maxHeight: 1024,
-                      success: resolve,
-                      error: e => {
-                        // Non-images break compressor
-                        if (e.toString().includes("File or Blob")) {
-                          return resolve(file)
-                        }
-
-                        _reject(e)
-                      },
-                    })
-                  })
+                  file = await stripExifData(file)
                 }
 
                 const {ciphertext, key, nonce, algorithm} = await encryptFile(file)

src/lib/components/InputPicture.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {randomId} from "@welshman/lib"
-  import {preventDefault, stopPropagation} from "@lib/html"
+  import {preventDefault, stopPropagation, stripExifData} from "@lib/html"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import GallerySend from "@assets/icons/gallery-send.svg?dataurl"
@@ -27,14 +27,14 @@
     active = false
   }
 
-  const onDrop = (e: any) => {
+  const onDrop = async (e: any) => {
     active = false
 
-    file = e.dataTransfer.files[0]
+    file = await stripExifData(e.dataTransfer.files[0])
   }
 
-  const onChange = (e: any) => {
-    file = e.target.files[0]
+  const onChange = async (e: any) => {
+    file = await stripExifData(e.target.files[0])
   }
 
   const onClear = () => {

src/lib/components/InputProfilePicture.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {randomId} from "@welshman/lib"
-  import {preventDefault, stopPropagation} from "@lib/html"
+  import {preventDefault, stopPropagation, stripExifData} from "@lib/html"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import GallerySend from "@assets/icons/gallery-send.svg?dataurl"
@@ -27,14 +27,14 @@
     active = false
   }
 
-  const onDrop = (e: any) => {
+  const onDrop = async (e: any) => {
     active = false
 
-    file = e.dataTransfer.files[0]
+    file = await stripExifData(e.dataTransfer.files[0])
   }
 
-  const onChange = (e: any) => {
-    file = e.target.files[0]
+  const onChange = async (e: any) => {
+    file = await stripExifData(e.target.files[0])
   }
 
   const onClear = () => {

src/lib/html.ts

@@ -135,3 +135,34 @@ export const scrollToEvent = async (id: string, attempts = 3): Promise<boolean>
 
   return false
 }
+
+export const stripExifData = async (file, {maxWidth = null, maxHeight = null} = {}) => {
+  if (window.DataTransferItem && file instanceof DataTransferItem) {
+    file = file.getAsFile()
+  }
+
+  if (!file) {
+    return file
+  }
+
+  const {default: Compressor} = await import("compressorjs")
+
+  /* eslint no-new: 0 */
+
+  return new Promise((resolve, _reject) => {
+    new Compressor(file, {
+      maxWidth: maxWidth || 2048,
+      maxHeight: maxHeight || 2048,
+      convertSize: 10 * 1024 * 1024,
+      success: resolve,
+      error: e => {
+        // Non-images break compressor
+        if (e.toString().includes("File or Blob")) {
+          return resolve(file)
+        }
+
+        _reject(e)
+      },
+    })
+  })
+}