File upload from website to Firebase storage using Firebase v9-CodePudding

I have on my site an page where I handled File upload, but since I upgraded Firebase (I guess it was Firebase v7/8) this particular feature is not working anymore.

To handled the file upload in firebase storage I created a custom hook, where I use the useEffect because I need it to run each time there is a new file value. I passed a parametter (file) for the file I'm trying to upload and store it in database, and that way databse contains all image's url. Then I used the datas to load images in a react components.

The error I've got:

Uncaught TypeError: projectStorage.ref is not a function

Since I'm on Firebase v9 I'm lillte bit confused about it, and don't know what to change. Thank you for your help, I really appreciate =).

useStorage.jsx (custom hook)

import {projectStorage, projectFirestore, timestamp} from '../Firebase'
import { useEffect, useState } from 'react'


function useStorage(file) {
    const [progress, setProgress] = useState(0);
    const [error, setError] = useState(null);
    const [url, setUrl] = useState(null);
   
    useEffect(() => {

        const storageRef = projectStorage.ref(file.name)
        const collectionRef = projectFirestore.collection('images');

        storageRef.put(file).on('state_changed', (snap) => {
            let percent = (snap.bytesTransferred / snap.totalBytes) * 100;
            setProgress(percent >> 0); // or Math.trunc() 
        }, (err) => {
            setError(err);
        }, async () =>{
            const url = await storageRef.getDownloadURL();
            const createdAt = timestamp();
            collectionRef.add({ url, createdAt});
            setUrl(url);
        });

    }, [file]);

    return {progress, url, error};
}

export default useStorage;

CodePudding user response：

There's a top level function uploadBytesResumable() to upload files while monitoring progress. Try refactoring the code as shown below:

import {projectStorage, projectFirestore, timestamp} from '../Firebase'
import { ref as storageRef, uploadBytesResumable } from "firebase/storage";

useEffect(() => {
  // Creating a storage reference
  const storageReference = storageRef(projectStorage, file.name);
  
  // Creating an upload task 
  const uploadTask = uploadBytesResumable(storageReference, file);

  // Monitoring upload progress
  uploadTask.on("state_changed", (snapshot: any) => {
    console.log(snapshot);
    // render progress
  });
}, [file])

Checkout the documentation on Upload files with Cloud Storage on Web.