From 47af81e28124eb720975ac01f2b1ebd9b69bc1a2 Mon Sep 17 00:00:00 2001
From: Micha de Vries <micha@devrie.sh>
Date: Thu, 22 Feb 2024 14:50:25 +0100
Subject: [PATCH] Compress image on client

---
 package.json                         |  1 +
 pnpm-lock.yaml                       | 13 +++++++++++++
 src/components/logic/UploadImage.tsx |  8 +++++++-
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 51fed54..ca8278a 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6c123f3..2314974 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,6 +83,9 @@ dependencies:
   '@types/react-dom':
     specifier: 18.2.18
     version: 18.2.18
+  browser-image-compression:
+    specifier: ^2.0.2
+    version: 2.0.2
   class-variance-authority:
     specifier: ^0.7.0
     version: 0.7.0
@@ -5495,6 +5498,12 @@ packages:
     dependencies:
       fill-range: 7.0.1
 
+  /browser-image-compression@2.0.2:
+    resolution: {integrity: sha512-pBLlQyUf6yB8SmmngrcOw3EoS4RpQ1BcylI3T9Yqn7+4nrQTXJD4sJDe5ODnJdrvNMaio5OicFo75rDyJD2Ucw==}
+    dependencies:
+      uzip: 0.20201231.0
+    dev: false
+
   /browserslist@4.22.2:
     resolution: {integrity: sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -10065,6 +10074,10 @@ packages:
     hasBin: true
     dev: false
 
+  /uzip@0.20201231.0:
+    resolution: {integrity: sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng==}
+    dev: false
+
   /v8-compile-cache-lib@3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
 
diff --git a/src/components/logic/UploadImage.tsx b/src/components/logic/UploadImage.tsx
index 7b51602..93a67f2 100644
--- a/src/components/logic/UploadImage.tsx
+++ b/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);