I am trying to upload and then show the image on the page. How do i do that? i am currently getting the following error: Uncaught (in promise) TypeError: firebase__WEBPACK_IMPORTED_MODULE_2_.storage.ref is not a function at Observer.next.

in addition, the default image does not change. i do manage to console.log the image link, but i cant assign it to a variable.

the image is uploaded btw to the firebase server.

import React, { useState, useEffect } from "react";
import { Paper } from "@mui/material";
import authHeader from "../../features/authentication/AuthHeader";
import { storage } from "./firebase";
import { getDownloadURL, uploadBytesResumable, ref } from "firebase/storage";

function UserProfile() {
  const [user, setUser] = useState({});
  const [Url, setUrl] = useState('');

  async function fetchUser() {
    const response = await fetch("http://localhost:9005/getProfile", {
      headers: authHeader(),
    });
    const fetchedUser = await response.json();
    console.log(fetchedUser);
    setUser(fetchedUser);
  }

  useEffect(() => {
    fetchUser();
  }, []);

  //firebase upload below this

  const [progress, setProgress] = useState(0);

  const handleFireBaseUpload = (e) => {
    e.preventDefault();
    const image = e.target[0].files[0];
    console.log("uploading pic");
    console.log(image);
    uploadImage(image);
  };

  const uploadImage = (image) => {
    if (!image) {
      alert(`image format not supported${typeof image}`);
      return;
    }
    const storageRef = ref(storage, `/images/${image.name}`);
    const uploadTask = uploadBytesResumable(storageRef, image);

    uploadTask.on( "state_changed", (snapshot) => {
        const prog = Math.round(
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        );
        setProgress(prog);
        storage.ref('images').child(image.name).getDownloadURL()
        .then((url)=>{
          setUrl(url);
        });
      },
      (err) => console.log(err),
      () => {
        getDownloadURL(uploadTask.snapshot.ref).then((url) => console.log(url));
      }
      
    );
  };

  return (
    <>
      <paper elevation={6}>
      <h3>Upload Progress ${progress} %</h3>

        <div className="pfp">
          <form onSubmit={handleFireBaseUpload}>
            <input type="file" />
            <p>hgk</p>
            <button>Upload</button>
          </form>
          <img src={'https://th.bing.com/th/id/OIP.j3uYsrDvDgb3iLXvx1kcDgHaGh?pid=ImgDet&rs=1'} alt="Profile Picture" />
        </div>
      </paper>

      <Paper
        elevation={6}
        style={{ margin: "10px", padding: "15px", textAlign: "left" }}
        key={user.user_id}
      >
        First Name: {user.firstName}
        <br />
        Last Name: {user.lastName}
        <br />
        Email: {user.email}
        <br />
        Phone: {user.phone}
      </Paper>
    </>
  );
}
export { UserProfile as default };

CodePudding user response：

You should update URL after the image has been uploaded. Also storage.ref('images') is the name-spaced syntax. The new V9 SDK has a functional syntax that you are using to get download URL below. Try refactoring the code as shown below:

uploadTask.on("state_changed", (snapshot) => {
    const prog = Math.round(
      (snapshot.bytesTransferred / snapshot.totalBytes) * 100
    );
    setProgress(prog); 
    // Don't fetch downloadURL here, just track progress
  },
  (err) => console.log(err),
  () => {
    // Get download URL here
    getDownloadURL(uploadTask.snapshot.ref).then((url) => {
      setUrl(url);
      console.log(url)
    })
  }
);