How to upload an image into firebase storage

We will learn how to upload an image file into firebase using firebase storage like imageBB or postimages. We are gonna use firebase web sdk in our react-js project.

Steps:

• Create a new firebase project.
• setup firebase storage. Choose test mode option to get started. In notes section, I have shown how to use it longer.
• Setup your local project folder in your computer. Setup firebase config file to link up with your firebase-project.

• Initialize firebase-storage service:

  // >> inside firebase config file
  import { getStorage } from 'firebase/storage';
  
  // init storage service
  const fbStorage = getStorage(app)
  export {fbStorage}
  

• Now we can create a form with an input (type- file) element and a submit button so that we can upload image from our computer. Add submit event handler to the form (handleUploadImage).

  <!-- upload form -->
  <form onSubmit={handleUploadImage}>
    <input type="file" name="imageInput" />
    <button>Upload</button>
  </form>
  

The form looks like this (apply your own styles):

• We can choose an image from our computer by clicking "choose file" btn; after choosing image, we should click "upload" button. Then the form fires "onSubmit" event and invoke "handleUploadImage" function. Define "handleUploadImage" function:

    import { getDownloadURL, ref, uploadBytes } from "firebase/storage";
    import { fbStorage } from "../../firebase.config"; // NB: define your own path

    const handleUploadImage = async e => {
      // prevent deafult form submit
      e.preventDefault()

      // get imageInput element inside form
      const imageInput = e.target.imageInput
      // imageInput is an array of files. we choose the fist file (which is image file)
      const imageFile = imageInput.files[0]

      // validate: show alert if no image is selected
      if (!imageFile) {
        alert('please, select a image!')
        return
      }

      // create file path ref for firebase storage. 
      // if image filename is "eagle.jpg"; then the path would be "images/eagle.jpg"
      const filePathRef = ref(fbStorage, `images/${imageFile.name}`)

      // upload the image file into firebse storage 
      const uploadResult = await uploadBytes(filePathRef, imageFile)

      // finally get image url which can be used to access image from your website
      const imageUrl = await getDownloadURL(filePathRef)

      // [ TODO: put your code here whatever you want to do with the "imageUrl" ]

      // reset form (optional)
      e.target.reset()
    }

Now, you have successfully uploaded the image into firebase storage.

If you want to find the image in firebase website: open your firebase project (from firebase website) > firebase storage > Files (tab) > images > your images lives here. From here you can manage (delete, upload) your images manually.

Notes:

Use storage for longer period:

test mode only keeps your storage active for 1 month. You must setup storage rules to use longer period. The easiest way is: go to firebase storage > select "Rules" tab > reset your date as new future date to use it longer. You have to learn security rules to use it more effectively. If you don't update security rules, anyone who has your firebase credentials can modify your data!

---

Follow me (Rahat Faruk) to learn more about webdev content. If you want to learn new content, comment here. Thank you.

Connect with me: in/rahatfaruk