Firebase version 9

[jafarijason]

Do you have a plan to support firebase v9 modular?
https://firebase.google.com/docs/web/modular-upgrade

I can contribute for using v9

[fringley]

I wrote a dirty patch that allowed me to use with v9

storage is your firebase v9 storage object from getStorage()
refForUploader can be passed to the storageRef prop on the FileUploader

import { ref, uploadBytesResumable } from "firebase/storage"

const refForUploader = ref(storage, "images")
refForUploader["child"] = function (filename: string) {
  const newRef = ref(this, filename)
  newRef["put"] = function (file: any, metadata: any) {
    return uploadBytesResumable(newRef, file, metadata)
  }
  return newRef
}

[brownieboy]

I was able to upload images by loading importing the Firebase 9 libraries in compatibility mode, like so:

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/database";
import "firebase/compat/storage";

The format of the data returned to the onProgress and onSuccess handlers appears to have changed. For the task.on("state_changed" call (for your onProgress handler) the bytesTransferred and totalBytes properties are no longer at the top level of the returned snapshot object. Instead, they're in a property called _delegate, like so:

{
    "_delegate": {
        "bytesTransferred": 6828,
        "totalBytes": 6828,
        "metadata": {
            "type": "file",

A few other, somewhat arbitrary, changes that I've seen:

• firebaseApp.firebase_ is now firebaseApp.firebase (drop the underscore at the end)
• task.blob_.data_ is now task._delegate._blob.data_ (underscores have moved around)

These changes were enough to get it working for my purposes.

I'll consider a PR if anybody is still maintaining this component, but it doesn't look as if they are. I've copied the code directly into my own project and modified it there for now.

[0x80]

@fringley Thanks a lot! 👍 With TS you will get some errors, so this is what I ended up using:

  // @ts-expect-error firebase v9 hack for react-firebase-file-uploader
  refForUploader.child = function (filename: string) {
    const newRef = ref(this, filename);
    // @ts-expect-error firebase v9 hack for react-firebase-file-uploader
    newRef.put = function (file: any, metadata: any) {
      return uploadBytesResumable(newRef, file, metadata);
    };
    return newRef;
  };

[fringley]

@0x80 oh that's handy - i didn't know about that typescript flag! thank you :)