Firebase Storage UploadBytes Function Not Accepting Metadata

Issue

I am making a website using Firebase that needs to send an image to Firebase Storage and the projects' title as metadata.

In the Firebase Storage documentation, it states that the uploadBytes() function can accept: first the ref to the file, then the file itself and finally the metadata. (you can find the page i'm talking about here)

This is the code that I wrote:

let projectUploadImage = getFiles();
let projectTitle = getProjectTitle();

async function addProject() {

    let metadata = {
        projectTitle
    };
        
    let uploadRef = ref(storage, projectUploadImage[0].name);

    await uploadBytes(uploadRef, projectUploadImage[0], metadata);
}

Here I get an error on this line: await uploadBytes(uploadRef, projectUploadImage[0], metadata);

The error goes:

No overload matches this call.
  Overload 1 of 2, '(ref: Reference, data: Blob | Uint8Array | ArrayBuffer, metadata?: UploadMetadata | undefined): Promise<UploadResult>', gave the following error.
    Argument of type 'StorageReference' is not assignable to parameter of type 'Reference'.
      Type 'StorageReference' is missing the following properties from type 'Reference': child, delete, getDownloadURL, getMetadata, and 5 more.
  Overload 2 of 2, '(ref: StorageReference, data: Blob | Uint8Array | ArrayBuffer, metadata?: UploadMetadata | undefined): Promise<...>', gave the following error.
    Type '{ projectTitle: string; }' has no properties in common with type 'UploadMetadata'.ts(2769)

I don't know why this happens, somebody please help.

Solution

If I recall correctly, you can only set specific properties on the top-level of the metadata. If you want to store other values, such as your projectTitle, store it under customMetadata:

let metadata = {
  customMetadata: {
    projectTitle
  }
};

Also see my answer here: Firebase Storage Metadata Not Showing Up and the code from this test bed:

const metadata = {
  contentType: "text/plain",
  cacheControl: 'public,max-age=300',
  customMetadata: {
      houseId: "houseId",
      houseName: "houseName",
  },
};
const storageRef = ref(storage, "72923963");
const message = 'This is my message.';
console.log('Starting upload');
uploadString(storageRef, message, "raw", metadata)

Answered By - Frank van Puffelen