title: How to upload images to Firebase web v9 using reactjs
body: <p>I am having an issue concerning uploading images to firebase but using web version 9.
  I am following along with a toturial on one of the platforms in which he is building a facebook clone. and I am stuck in this part of firebase uploading images and files...
  I checked the documentations of firebase and i tried to figure out to should be changed, but I couldn't do it.
  What I want is to convert the firebase code from the old version to the newest one web V9.
  This is my code but in the previous version:</p>
  <pre><code>import { useSession } from 'next-auth/client';
  import { useRef, useState } from 'react';
  import { db, storage } from '../firebase';
  import firebase from 'firebase';
  
  function InputBox() {
      const [session] = useSession();
      const inputRef = useRef(null);
      const filepickerRef = useRef(null);
      const[imageToPost, setImageToPost] = useState(null);
  
      const sendPost = (e) =&gt; {
          e.preventDefault();
  
          if (!inputRef.current.value) return;
  
          db.collection('posts').add({
              message: inputRef.current.value,
              name: session.user.name,
              email: session.user.email,
              image: session.user.image,
              timestamp: firebase.firestore.FieldValue.serverTimestamp()
          }).then(doc =&gt; {
              if (imageToPost) {
                  const uploadTask = storage.ref(`posts/${doc.id}`).putString(imageToPost, 'data_url')
  
                  removeImage();
  
                  uploadTask.on('state_change', null, error =&gt; console.error(error), 
                  () =&gt; {
                      //When the upload completes
                      storage.ref(`posts`).child(doc.id).getDownloadURL().then(url =&gt; {
                          db.collection('posts').doc(doc.id).set({
                              postImage: url
                          },
                          { merge: true}
                          );
                      });
                  });
              }
          });
  
          inputRef.current.value = &quot;&quot;;
      };
  
      const addImageToPost = (e) =&gt; {
          const reader = new FileReader();
          if (e.target.files[0]) {
              reader.readAsDataURL(e.target.files[0]);
          }
          reader.onload = (readerEvent) =&gt; {
              setImageToPost(readerEvent.target.result);
          };
      };
  
      const removeImage = () =&gt; {
          setImageToPost(null);
      };
  
      return (here is my jsx)
  
  </code></pre>