Firebase File Uploader for Quasar Framework

QFirebaseUploaderBase.vue

<script>
import { QUploaderBase } from 'quasar'
import firebase from 'firebase/app'
import 'firebase/storage'
import uuid from 'uuid/v4'

export default {
  mixins: [ QUploaderBase ],

  props: {
    metadata: Object
  },

  data () {
    return {
      progressUpload: 0,
      file: File,
      uploadTask: ''
    }
  },

  methods: {
    upload () {
      this.files.forEach(file => {
        const ref = 'media/' + uuid()
        const uploadTask = firebase
          .storage()
          .ref()
          .child(ref)
          .put(file, this.metadata)

        uploadTask.on(
          'state_changed',
          sp => {
            this.uploadSize = sp.totalBytes
            this.uploadedSize = sp.bytesTransferred
          },
          null,
          () => {
            uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
              this.$emit('upload', {
                url: downloadURL,
                id: ref,
                name: file.name,
                size: file.size,
                uploadedDate: new Date(),
                lastModified: file.lastModified,
                description: ''
              })
              this.removeFile(file)
            })
          }
        )
      })
    }
  }
}
</script>

Usage

<template>
  <QFirebaseUploaderBase
    label="Upload photos"
    :metadata="metadata"
    auto-upload
    @upload="addImage"
    multiple/>
</template>
<script>
export default {

  methods: {
    addImage (item) {
      Vue.set(this.gallery, item.id, item)
      // this.save()
    }
  }
}
</script>

can u show more about the usage??
thanks a lot

You rock Sir! Very useful. Just curious: what's the metadata for?

@RaviH metadata is any additional information about file that might be useful later, for example: labels, tags, categories, author, reviewer, revision, state, etc.

In quasar 2 QUploaderBase was deprecated in favour of createUploaderComponent, any clues how to reimplement the firebase upload with it?

In quasar 2 QUploaderBase was deprecated in favour of createUploaderComponent, any clues how to reimplement the firebase upload with it?

https://quasar.dev/vue-components/uploader#uploading-multiple-files:~:text=5.-,Supporting,-other%20services

also looking for a Quasar2 implementation, will check this out and see if I can port it