title: how do i get the link from my uploaded file to firebase to pass to img element?
body: <p>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: <em>firebase__WEBPACK_IMPORTED_MODULE_2</em>_.storage.ref is not a function
  at Observer.next.</p>
  <p>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.</p>
  <p>the image is uploaded btw to the firebase server.</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import { Paper } from &quot;@mui/material&quot;;
  import authHeader from &quot;../../features/authentication/AuthHeader&quot;;
  import { storage } from &quot;./firebase&quot;;
  import { getDownloadURL, uploadBytesResumable, ref } from &quot;firebase/storage&quot;;
  
  function UserProfile() {
    const [user, setUser] = useState({});
    const [Url, setUrl] = useState('');
  
    async function fetchUser() {
      const response = await fetch(&quot;http://localhost:9005/getProfile&quot;, {
        headers: authHeader(),
      });
      const fetchedUser = await response.json();
      console.log(fetchedUser);
      setUser(fetchedUser);
    }
  
    useEffect(() =&gt; {
      fetchUser();
    }, []);
  
    //firebase upload below this
  
    const [progress, setProgress] = useState(0);
  
    const handleFireBaseUpload = (e) =&gt; {
      e.preventDefault();
      const image = e.target[0].files[0];
      console.log(&quot;uploading pic&quot;);
      console.log(image);
      uploadImage(image);
    };
  
    const uploadImage = (image) =&gt; {
      if (!image) {
        alert(`image format not supported${typeof image}`);
        return;
      }
      const storageRef = ref(storage, `/images/${image.name}`);
      const uploadTask = uploadBytesResumable(storageRef, image);
  
      uploadTask.on( &quot;state_changed&quot;, (snapshot) =&gt; {
          const prog = Math.round(
            (snapshot.bytesTransferred / snapshot.totalBytes) * 100
          );
          setProgress(prog);
          storage.ref('images').child(image.name).getDownloadURL()
          .then((url)=&gt;{
            setUrl(url);
          });
        },
        (err) =&gt; console.log(err),
        () =&gt; {
          getDownloadURL(uploadTask.snapshot.ref).then((url) =&gt; console.log(url));
        }
        
      );
    };
  
    return (
      &lt;&gt;
        &lt;paper elevation={6}&gt;
        &lt;h3&gt;Upload Progress ${progress} %&lt;/h3&gt;
  
          &lt;div className=&quot;pfp&quot;&gt;
            &lt;form onSubmit={handleFireBaseUpload}&gt;
              &lt;input type=&quot;file&quot; /&gt;
              &lt;p&gt;hgk&lt;/p&gt;
              &lt;button&gt;Upload&lt;/button&gt;
            &lt;/form&gt;
            &lt;img src={'https://th.bing.com/th/id/OIP.j3uYsrDvDgb3iLXvx1kcDgHaGh?pid=ImgDet&amp;rs=1'} alt=&quot;Profile Picture&quot; /&gt;
          &lt;/div&gt;
        &lt;/paper&gt;
  
        &lt;Paper
          elevation={6}
          style={{ margin: &quot;10px&quot;, padding: &quot;15px&quot;, textAlign: &quot;left&quot; }}
          key={user.user_id}
        &gt;
          First Name: {user.firstName}
          &lt;br /&gt;
          Last Name: {user.lastName}
          &lt;br /&gt;
          Email: {user.email}
          &lt;br /&gt;
          Phone: {user.phone}
        &lt;/Paper&gt;
      &lt;/&gt;
    );
  }
  export { UserProfile as default };
  </code></pre>