diff --git a/app/complete-profile/page.tsx b/app/complete-profile/page.tsx index 101740a..78c60fd 100644 --- a/app/complete-profile/page.tsx +++ b/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 ( }> @@ -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'); diff --git a/package-lock.json b/package-lock.json index 3ebe780..6d5299d 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 1d4b1e2..59f1b9c 100644 --- a/package.json +++ b/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",