complete image upload

client/src/pages/Profile.jsx

@@ -1,14 +1,74 @@
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+import {getStorage, uploadBytesResumable, ref, getDownloadURL} from 'firebase/storage'
 import { useSelector } from 'react-redux'
+import { app } from '../firebase';
 
 
 const Profile = () => {
+
+  const fileRef = useRef(null)
+
   const {currentUser} = useSelector((state) => state.user)
+  const [file, setFile] = useState(undefined)
+  const [filePerc, setFilePerc] = useState(0);
+  const [fileUploadError, setFileUploadError] = useState(false);
+  const [formData, setFormData] = useState({})
+  // firebase storage
+  // allow read;
+  // allow write: if
+  // request.resource.size < 2 * 1024 * 1024 &&
+  // request.resource.contentType.matches('image/.*')
+
+  useEffect(() =>{
+    if(file){
+      handleFileUpload(file);
+    }
+  }, [file])
+
+  const handleFileUpload = (file) => {
+    const storage = getStorage(app);
+    const fileName = new Date().getTime() + file.name;
+    const storageRef = ref(storage, fileName);
+    const uploadTask = uploadBytesResumable(storageRef, file);
+
+    uploadTask.on(
+      'state_changed',
+      (snapshot) => {
+        const progress =
+          (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+        setFilePerc(Math.round(progress));
+      },
+      (error) => {
+        setFileUploadError(true);
+      },
+      () => {
+        getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) =>
+          setFormData({ ...formData, avatar: downloadURL })
+        );
+      }
+    );
+  };
+
+
   return (
     <div className='p-3 max-w-lg mx-auto'>
       <h1 className='text-3xl font-semibold text-center my-7'>Profile</h1>
       <form className='flex flex-col gap-4'>
-        <img className='rounded-full h-24 w-24 object-cover cursor-pointer self-center mt-2' src={currentUser.avatar} alt="" />
+        <input onChange={(e) => setFile(e.target.files[0])} type="file" ref={fileRef}  hidden accept='image/*'/>
+        <img onClick={() => fileRef.current.click()} className='rounded-full h-24 w-24 object-cover cursor-pointer self-center mt-2' src={formData.avatar || currentUser.avatar} alt="" />
+        <p className='text-sm self-center'>
+          {fileUploadError ? (
+            <span className='text-red-700'>
+              Error Image upload (image must be less than 2 mb)
+            </span>
+          ) : filePerc > 0 && filePerc < 100 ? (
+            <span className='text-slate-700'>{`Uploading ${filePerc}%`}</span>
+          ) : filePerc === 100 ? (
+            <span className='text-green-700'>Image successfully uploaded!</span>
+          ) : (
+            ''
+          )}
+        </p>
         <input type="text" placeholder='Username' className='border p-3 rounded-lg' id='username'/>
         <input type="email" placeholder='Email' className='border p-3 rounded-lg' id='email'/>
         <input type="number" placeholder='Phone Number' className='border p-3 rounded-lg' id='phone'/>