Start working on allowing previous profile picture to be removed. Not working rn but I think it is because of persmissions for that storage bucket.

src/lib/hooks/useFileUpload.ts

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState, useRef } from 'react';
-import { uploadFile } from '@/lib/actions';
+import { deleteFile, uploadFile } from '@/lib/actions';
 import { toast } from 'sonner';
 import { useAuth } from '@/components/context/auth';
 import { resizeImage } from '@/lib/hooks';
@@ -14,7 +14,8 @@ export type uploadToStorageProps = {
     maxWidth?: number;
     maxHeight?: number;
     quality?: number;
-  }
+  };
+  prevPath?: string | null;
 };
 
 export const useFileUpload = () => {
@@ -27,11 +28,22 @@ export const useFileUpload = () => {
     bucket,
     resize = false,
     options = {},
+    prevPath = null,
   }: uploadToStorageProps) => {
     try {
       if (!isAuthenticated) throw new Error('User is not authenticated');
 
       setIsUploading(true);
+      if (prevPath !== null) {
+        const deleteResult = await deleteFile({
+          bucket,
+          path: [...prevPath],
+        });
+        if (!deleteResult.success) {
+          console.error('Error deleting file:', deleteResult.error);
+          throw new Error(deleteResult.error || `Failed to delete ${prevPath}`);
+        } else console.log('Delete sucessful!')
+      }
 
       let fileToUpload = file;
       if (resize && file.type.startsWith('image/'))