firebase-storage-helper.js

import firebase from 'firebase/app';
import 'firebase/storage';
import { Observable } from 'rxjs';

firebase.initializeApp({
  apiKey: process.env.VUE_APP_API_KEY,
  authDomain: process.env.VUE_APP_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_DATABASE_URL,
  projectId: process.env.VUE_APP_PROJECT_ID,
  storageBucket: process.env.VUE_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_MESSAGING_SENDER_ID
});


const storage = firebase.storage();

const storageRef = storage.ref();

export const fbUploader = async (path, file) => {

  const res = await fetch(file);
  const blob = await res.blob();

  const obs = new Observable(sub => {
    const task = storageRef.child(path).put(blob);

    task.on('state_changed', (snap) => {
      let progress = (snap.bytesTransferred / snap.totalBytes) * 100;
      
      sub.next({
        done: false,
        progress
      });

    }, e => {
      sub.error(e);
    }, async () => {
      const url = await task.snapshot.ref.getDownloadURL();
      sub.next({
        done: true,
        progress: 100,
        url
      });
      sub.complete();
    });

  });

  return obs;
};