mattt.pw

Part of my ongoing quest to learn Firebase this time focuses on Firebase Storage and Firestore. We use Storage to store the actual image files, and Firestore to act as a repository for the image URLs.

This project taught me how to reference the bytesTransferred and totalBytes properties provided by Firebase to create a percentage variable which we then use with React's useState to store a progress variable which is reference by the loading bar as a width parameter to draw the file upload bar.

const ProgressBar = ({ file, setFile}) => {

    const { url, progress } = useStorage(file);

    useEffect(() => {
        if(url){
            setFile(null);
        }
    }, [url, setFile])

    return (
        <div className="progress-bar" style={{ width: progress + '%' }}></div>
    )
}