Compress images

app/complete-profile/page.tsx

@@ -9,6 +9,8 @@ import {parseImage} from "@/lib/client/media";
 import {DeleteProfileButton} from "@/lib/client/profile";
 import PromptAnswer from '@/components/ui/PromptAnswer';
 
+import imageCompression from 'browser-image-compression';
+
 export default function CompleteProfile() {
   return (
     <Suspense fallback={<div></div>}>
@@ -213,19 +215,32 @@ function RegisterComponent() {
       return;
     }
 
-    const formData = new FormData();
-    formData.append('file', file);
+    // Compression options
+    const options = {
+      maxSizeMB: 10,              // Target max size in MB
+      maxWidthOrHeight: 1024,    // Resize to fit within this dimension
+      useWebWorker: true,
+    };
 
     try {
       setIsUploading(true);
       setError('');
 
+      const compressedFile = await imageCompression(file, options);
+
+      console.log(`Original: ${file.size / 1024} KB`);
+      console.log(`Compressed: ${compressedFile.size / 1024} KB`);
+
+      // Send via FormData
+      const formData = new FormData();
+      formData.append('file', compressedFile);
+
       const response = await fetch('/api/upload', {
         method: 'POST',
         body: formData,
       });
 
-      console.log('response:', response);
+      console.log('response:', response.headers);
       if (!response.ok) {
         const errorData = await response.json();
         setError(errorData.error || 'Failed to upload image');

package-lock.json

@@ -26,6 +26,7 @@
         "@upstash/ratelimit": "^2.0.6",
         "@upstash/redis": "^1.35.3",
         "bcryptjs": "^3.0.2",
+        "browser-image-compression": "^2.0.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "express-rate-limit": "^8.0.1",
@@ -5621,6 +5622,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/browser-image-compression": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/browser-image-compression/-/browser-image-compression-2.0.2.tgz",
+      "integrity": "sha512-pBLlQyUf6yB8SmmngrcOw3EoS4RpQ1BcylI3T9Yqn7+4nrQTXJD4sJDe5ODnJdrvNMaio5OicFo75rDyJD2Ucw==",
+      "license": "MIT",
+      "dependencies": {
+        "uzip": "0.20201231.0"
+      }
+    },
     "node_modules/buffer-equal-constant-time": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
@@ -11678,6 +11688,12 @@
         "uuid": "dist/esm/bin/uuid"
       }
     },
+    "node_modules/uzip": {
+      "version": "0.20201231.0",
+      "resolved": "https://registry.npmjs.org/uzip/-/uzip-0.20201231.0.tgz",
+      "integrity": "sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng==",
+      "license": "MIT"
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",

package.json

@@ -27,6 +27,7 @@
     "@upstash/ratelimit": "^2.0.6",
     "@upstash/redis": "^1.35.3",
     "bcryptjs": "^3.0.2",
+    "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "express-rate-limit": "^8.0.1",