Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Firebase File Uploader for Quasar Framework
<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>
@razbakov

This comment has been minimized.

Copy link
Owner Author

razbakov commented Apr 23, 2019

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>
@LeslieLei

This comment has been minimized.

Copy link

LeslieLei commented Jun 27, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.