feat: Profile Image resizing

Author: wzrdx

src/components/account/profile/ImageUpload.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@heroui/button';
 import { uploadProfileImage } from '@lib/api/backend';
+import { resizeImage } from '@lib/utils';
 import { useCallback, useRef } from 'react';
 import toast from 'react-hot-toast';
 
@@ -16,17 +17,16 @@ export default function ImageUpload({
         async (event: React.ChangeEvent<HTMLInputElement>) => {
             setImageLoading(true);
 
-            const file = event.target.files?.[0];
+            let file: File | undefined = event.target.files?.[0];
 
             if (!file) {
                 return;
             }
 
-            if (file.size > 500_000) {
-                const message = 'Image size must not exceed 500 KB.';
-                toast.error(message);
-                event.target.value = '';
-                return;
+            if (file.size > 50_000) {
+                const resizedBlob = await resizeImage(file);
+                console.log('Resized size (KB):', resizedBlob.size / 1024);
+                file = new File([resizedBlob], file.name, { type: 'image/jpeg' });
             }
 
             try {

src/lib/api/backend.tsx

@@ -105,9 +105,9 @@ export const initSumsubSession = (type: 'individual' | 'company') => _doPost<str
 export const getPublicProfileInfo = async (address: types.EthAddress) =>
     _doPost<any>('/branding/get-brands', { brandAddresses: [address] });
 
-export const uploadProfileImage = async (logo: File) => {
+export const uploadProfileImage = async (file: File) => {
     const formData = new FormData();
-    formData.append('logo', logo);
+    formData.append('logo', file);
 
     return _doPost<any>('/branding/edit-logo', formData, {
         'Content-Type': 'multipart/form-data',

src/lib/utils.tsx

@@ -141,3 +141,44 @@ export function parseIfJson<T = any>(input: string): T | string {
         return input;
     }
 }
+
+export function resizeImage(file: File, maxWidth = 512, maxHeight = 512, quality = 0.9): Promise<Blob> {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => {
+            let { width, height } = img;
+
+            // Maintain aspect ratio
+            if (width > height) {
+                if (width > maxWidth) {
+                    height *= maxWidth / width;
+                    width = maxWidth;
+                }
+            } else {
+                if (height > maxHeight) {
+                    width *= maxHeight / height;
+                    height = maxHeight;
+                }
+            }
+
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) return reject(new Error('No canvas context'));
+
+            ctx.drawImage(img, 0, 0, width, height);
+
+            canvas.toBlob(
+                (blob) => {
+                    if (!blob) return reject(new Error('Canvas toBlob failed'));
+                    resolve(blob);
+                },
+                'image/jpeg',
+                quality, // Between 0 and 1
+            );
+        };
+        img.onerror = reject;
+        img.src = URL.createObjectURL(file);
+    });
+}

src/schemas/profile.ts

@@ -1,5 +1,5 @@
 import z from 'zod';
-import { getOptionalStringWithSpacesSchema, getStringSchema } from './common';
+import { getOptionalStringWithSpacesSchema } from './common';
 
 export const buildPublicProfileSchema = (brandingPlatforms: string[]) => {
     const shape: Record<string, z.ZodType> = {};
@@ -9,7 +9,7 @@ export const buildPublicProfileSchema = (brandingPlatforms: string[]) => {
     }
 
     return z.object({
-        name: getStringSchema(3, 32),
+        name: getOptionalStringWithSpacesSchema(3, 32),
         description: getOptionalStringWithSpacesSchema(0, 80),
         links: z.object(shape),
     });