Compress image on client

package.json

@@ -44,6 +44,7 @@
     "@types/node": "20.10.5",
     "@types/react": "18.2.46",
     "@types/react-dom": "18.2.18",
+    "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.1",
     "cmdk": "^0.2.0",

src/components/logic/UploadImage.tsx

@@ -1,6 +1,7 @@
 import { Intent, intentProperties } from '@/lib/image';
 import { cn } from '@/lib/utils';
 import { Actor } from '@/schema/resources/actor';
+import imageCompression from 'browser-image-compression';
 import { Loader2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import React, {
@@ -80,8 +81,13 @@ export default function UploadImage({
         (async (): Promise<true | void> => {
             setIsLoading(true);
 
+            const compressed = await imageCompression(blob as File, {
+                maxSizeMB: 5,
+                useWebWorker: true,
+            });
+
             const data = new FormData();
-            data.append('file', blob, 'profilepicture.png');
+            data.append('file', compressed, 'profilepicture.png');
             data.append('intent', intent);
             if (actor?.type != 'user') data.append('target', actor.id);