Skip to content

Instantly share code, notes, and snippets.

@razbakov
Created April 23, 2019 14:38
Show Gist options
  • Save razbakov/378caedba3f24e3d8336442182528719 to your computer and use it in GitHub Desktop.
Save razbakov/378caedba3f24e3d8336442182528719 to your computer and use it in GitHub Desktop.
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>
@vic-cieslak
Copy link

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

@glorat
Copy link

glorat commented Feb 25, 2024

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

@tlloydukdev
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment