Re: Q-Uploader with firebase storage

Based on the current version of the docs and https://gist.github.com/razbakov/378caedba3f24e3d8336442182528719

// QFirebaseUploader.js
import { QUploaderBase } from "quasar";

// src/boot/firebase.js:
// export const storage = firebase.initializeApp(config).storage();
import { storage } from "boot/firebase";

export default {
  name: "QFirebaseUploader",

  mixins: [QUploaderBase],

  props: {
    path: String
  },

  data() {
    return {
      uploading: false,
      uploadTasks: []
    };
  },

  computed: {
    // [REQUIRED]
    // we're working on uploading files
    isUploading() {
      return this.uploading;
    },

    // [optional]
    // shows overlay on top of the
    // uploader signaling it's waiting
    // on something (blocks all controls)
    isBusy() {
      return this.uploading;
    }
  },

  methods: {
    // [REQUIRED]
    // abort and clean up any process
    // that is in progress
    abort() {
      this.uploadTasks.forEach(uploadTask => {
        uploadTask.cancel();
      });

      this.uploading = false;
    },

    // [REQUIRED]
    upload() {
      if (this.canUpload === false) {
        return;
      }

      this.uploading = true;

      this.files.forEach(file => {
        const datetime = new Date().toISOString().split(".")[0];
        const newRef = this.path + datetime + "_" + file.name;
        const uploadTask = storage.ref(newRef).put(file);

        this.uploadTasks.push(uploadTask);

        uploadTask.on(
          "state_changed",
          snapshot => (this.uploadedSize += snapshot.bytesTransferred),
          error => console.log(error),
          () => {
            uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
              this.$emit("upload", {
                url: downloadURL,
                name: file.name,
                uploadedDate: datetime
              });
              this.removeFile(file);
            });

            this.uploadedSize - this.uploadSize === 0 &&
              (this.uploading = false);
          }
        );
      });
    }
  }
};

Used like QUploader with a path prop (instead of url), which should be a string that ends with a slash. For example: files/