Upload file to a firebase storage bucket — React

upload-firebase-storage.js

import React, { useState } from "react";
import firebase from "firebase";
import "firebase/storage";

const firebaseConfig = {};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

export const storage = firebase.storage();

function UploadForm() {
  const [file, setFile] = useState(null);
  const [url, setURL] = useState("");

  function handleChange(e) {
    setFile(e.target.files[0]);
  }

  function handleUpload(e) {
    e.preventDefault();
    const uploadTask = storage.ref(`/images/${file.name}`).put(file);
    uploadTask.on("state_changed", console.log, console.error, () => {
      storage
        .ref("images")
        .child(file.name)
        .getDownloadURL()
        .then((url) => {
          setFile(null);
          setURL(url);
        });
    });
  }

  return (
    <div>
      <form onSubmit={handleUpload}>
        <input type='file' onChange={handleChange} />
        <button disabled={!file}>Upload to firebase</button>
      </form>
      <img src={url} alt='' />
    </div>
  );
}