Small stuff

src/lib/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './resizeImage';
+export * from './useFileUpload';

src/lib/hooks/resizeImage.ts

@@ -0,0 +1,59 @@
+'use client'
+
+export type resizeImageProps = {
+  file: File,
+  options?: {
+    maxWidth?: number,
+    maxHeight?: number,
+    quality?: number,
+  }
+};
+
+export const resizeImage = async ({
+  file,
+  options = {},
+}: resizeImageProps): Promise<File> => {
+    const {
+      maxWidth = 800,
+      maxHeight = 800,
+      quality = 0.8,
+    } = options;
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = (event) => {
+        const img = new Image();
+        img.src = event.target?.result as string;
+        img.onload = () => {
+          let width = img.width;
+          let height = img.height;
+          if (width > height) {
+            if (width > maxWidth) {
+              height = Math.round((height * maxWidth / width));
+              width = maxWidth;
+            }
+          } else if (height > maxHeight) {
+            width = Math.round((width * maxHeight / height));
+            height = maxHeight;
+          }
+          const canvas = document.createElement('canvas');
+          canvas.width = width;
+          canvas.height = height;
+          const ctx = canvas.getContext('2d');
+          ctx?.drawImage(img, 0, 0, width, height);
+          canvas.toBlob(
+            (blob) => {
+              if (!blob) return;
+              const resizedFile = new File([blob], file.name, {
+                type: 'imgage/jpeg',
+                lastModified: Date.now(),
+              });
+              resolve(resizedFile);
+            },
+            'image/jpeg',
+            quality
+          );
+        };
+      };
+    });
+};

src/lib/hooks/useFileUpload.ts

@@ -1,24 +1,51 @@
+'use client'
+
 import { useState, useRef } from 'react';
 import { uploadFile } from '@/lib/actions';
 import { toast } from 'sonner';
+import { useAuth } from '@/components/context/auth';
+import { resizeImage } from '@/lib/hooks';
+
+export type uploadToStorageProps = {
+  file: File;
+  bucket: string;
+  resize: boolean;
+  options?: {
+    maxWidth?: number;
+    maxHeight?: number;
+    quality?: number;
+  }
+};
 
 export const useFileUpload = () => {
   const [isUploading, setIsUploading] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const { profile, isAuthenticated } = useAuth();
 
-  const uploadToStorage = async (file: File, bucket: string) => {
+  const uploadToStorage = async ({
+    file,
+    bucket,
+    resize = false,
+    options = {},
+  }: uploadToStorageProps) => {
     try {
+      if (!isAuthenticated) throw new Error('User is not authenticated');
+
       setIsUploading(true);
 
+      let fileToUpload = file;
+      if (resize && file.type.startsWith('image/'))
+        fileToUpload = await resizeImage({ file, options });
+
       // Generate a unique filename to avoid collisions
       const fileExt = file.name.split('.').pop();
-      const fileName = `${Date.now()}-${Math.random().toString(36).substring(2, 15)}.${fileExt}`;
+      const fileName = `${Date.now()}-${profile?.id}.${fileExt}`;
 
       // Upload the file to Supabase storage
       const uploadResult = await uploadFile({
         bucket,
         path: fileName,
-        file,
+        file: fileToUpload,
         options: {
           upsert: true,
           contentType: file.type,