Uploading a base64 png with firebase's putString() gives me a 'type: application/octet-stream' in storage

Question

Removing data:image/png;base64, from the base64 will produce a 'type: application/octet-stream' in firestorage.

import { AngularFireStorage, AngularFireUploadTask } from '@angular/fire/storage';

    constructor(
        private storage: AngularFireStorage,
      ) { }

    const realData = this.croppedImageBase64.split(',')[1]; // to remove data:image/png;base64,

    this.task = this.storage.ref(path).putString(realData, 'base64', metadata);

Not removing data:image/png;base64, gives me an error in my console (I'm using ngx-image-cropper):

Answer 1

I suggest reading the API documentation for putString() . It's suggesting that the second parameter must be a StringFormat value, which can be only one of four values. It's meant to tell the SDK what is the format of the data you're about to send. That's different than the content type stored with the metadata of the object. The third argument to putString() is a UploadMetadata object, which has a contentType property. Use this to set the content type that you see in the console.

Answer 2

I solved this issue using:

import { AngularFireStorage, AngularFireUploadTask } from '@angular/fire/storage';
import {base64ToFile} from 'ngx-image-cropper';

constructor(
  ...
  private storage: AngularFireStorage,
  ...
) { }

imageCropped(event: ImageCroppedEvent) {
   this.croppedImage = event.base64;
   const file = base64ToFile(event.base64);   
   this.startPickedFileUpload(file);
}

startPickedFileUpload(file) {
....
const ref = this.storage.ref(path);
this.task = this.storage.upload(path, file, metadata);
...
}

Answer 3

They added a new field appId to the project config settings. I was using a config I copy/pasted to my environment.ts file for my angular project just like they told me to do a year or two ago. So I did not have this new field. Without this new field I wasted alot of time trying to figure out why I was getting this 400 error from angular fire storage when I was doing everything the way the demos showed verbatim.