Q-Uploader with firebase storage

[jvmonjo]

Since url property is required in q-uploader, I’m trying to figure out what is the proper way to configure it to work with firebase storage.

I managed to upload to Firebase Storage using custom method, but still don’t know how to make it work with the built in url property so the user can see the upload progress and success.

[a47ae]

I do not think this is possible because Firebase Storage requires the API to upload files.
Your only option would be to try the Google Cloud JSON API, because as far as I know Firebase is just Google Cloud under the hood for the most parts.
There you have a URL which you can give to QUploader: https://cloud.google.com/storage/docs/json_api/

Otherwise, you have to build the uploading component by yourself. Here is a guide on how to get the status of the upload: https://firebase.google.com/docs/storage/web/upload-files#monitor_upload_progress

[jvmonjo]

Thanks. I was afraid of that being the case, but I asked just in case I was missing something. I’ll try both solutions.

[a47ae]

Let us know which way worked for you.

[Val]

Hello

I need the same feature so I’ve spent the last hours working on a fork to use q-uploader with Firebase Storage

Looks good so far :

Usage : pass a Firebase Storage Ref and omit the url prop
<q-uploader :firebase-storage=“storageRef” />
edit: there’s more, I’ll provide more doc, don’t just rely on this

I’ll post the repo here soon after some more tests

Cheers

[Val]

You can find my PR there :
https://github.com/quasarframework/quasar/pull/838

Feel free to test and comment

---

Just provide a Firebase Storage Ref instead of an url, and you’re good.
All existing features are preserved : progress, events, abort, multiple files, additional fields …

New prop : firebaseStorage (Object || Function)

Simplest Usage

If prop firebaseStorage is a Firebase Storage Ref :

  const storageRef = firebase.storage().ref('quasar-uploader-test')
  ...
  <q-uploader :firebase-storage="storageRef" ... />

When you do not provide an url prop, q-uploader will look at the firebaseStorage prop and use it.
Everything else is taken care of.
As a bonus, the original additionalFields prop is preserved, and used to populate the metadata.customData that will be saved with your file.

Avdanced Usage

If prop firebaseStorage is a function that returns a Firebase Storage Ref :

  makeUploadTaskWithTimestamp (file) {
      const originalName = file.name
      const newFilename = `${Date.now()}.${file.name}`
      const metadata = {
        customMetadata: {
          originalName
        }
      }
      return storageRef.child(newFilename).put(file, metadata)
    }
  ...
  <q-uploader :firebase-storage="makeUploadTaskWithTimestamp " ... />

If firebaseStorage is a function, it will be passed a file object, and should return a Firebase Upload Task.
This is very useful if, by example, you wish to rename a file before upload : you can avoid overwriting an existing file with the same name.

You can also use this function to populate the metadata.customData object, to save any useful data with your file.

---

Minor feature : filter files before they reach the queue

New prop : fileFilter (Function)

Works with both the original url mode, and Firebase mode.

<q-uploader :file-filter="file => /.+\.png$/i.exec(file.name)" ... />

Useful if you want to limit uploads to some file extension, or limit them by size, etc.
Doesn’t replace a server-side check, but can avoid useless upload time/bandwidth waste (and user frustration).

Will emit a filtered event with the files that didn’t pass the test : can be used to notify the user and explain him the reasons.

---

Test/Demo

in quasar folder :
npm install firebase
in /dev/data :
copy firebase-storage-example.json as firebase-storage.json and fill it with your Firebase credentials

then quasar dev and go to http://localhost:8080/#/components/uploader

[jvmonjo]

Thanks I managed to write my own uploader and it works but it is not looking good. I’ll try your q-uploader pr.

[JordanOwlie]

+1 for the firebase storage uploader :).