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/