I have an Angular service which is supposed to have an uploadImage()
method that takes the image’s local filepath from an html form and is supposed to upload the image to a specific uri at Firebase storage (I use angular fire v7.6).
The problem is that there does not seem to be a function in Firebase (well angular/fire to be exact) that uploads the file from a local path string. Instead, there is uploadBytes()
, which requires some other format (Blob, Bytes, I am not sure).
I have no idea nor have I been able to find how in god’s name am I supposed to read the image file into that format so I can use it in uploadBytes()
.
This is what I have so far:
import {Injectable} from '@angular/core';
import {Storage, ref, uploadBytes} from '@angular/fire/storage';
import {from, map, Observable} from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ImageService {
constructor(private firebaseStorage: Storage) { }
uploadImage(id:number, filePath: string, name: string): Observable<string> {
const ext = filePath.split('.').pop();
const fileRef = ref(this.firebaseStorage, '/' + id + '/' + name + '.' + ext);
const correctFormat = ??????;
return from(uploadBytes(fileRef, correctFormat)).pipe(
map(taskSnapshot => {
return taskSnapshot.ref.fullPath;
})
);
}
}
Please help me.