CODEWITHSUNDEEP
angularimagefirebase-storageangular8webcam-capture
Manu
Manu

Reputation: 1263

angular 8 Ngx-Webcam - webcam image upload to Firebase storage

In Angular 8 application I am using Ngx-Webcam to capture the webcam image. and able to get the image by using imageAsDataUrl also able to display on page by using img tag
<img [src]="imgSrc">

I want to upload same image in firebase storage.please help me how to do it. I tried 

this.storage.upload(filePath, imgSrc).snapshotChanges().pipe().subscribe(...

but getting this error

FirebaseStorageError {code_: "storage/invalid-argument", message_: "Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File.", serverResponse_: null, name_: "FirebaseError"}

Upvotes: 1

Views: 2642

Answers (1)

Kishore Konangi
Kishore Konangi

Reputation: 554

you can use like this for JS/TS, to convert the ngx-webcam image to File type:

handleCapturedImage(webcamImage: WebcamImage) {
this.webcamImage = webcamImage;
const arr = this.webcamImage.imageAsDataUrl.split(",");
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
  u8arr[n] = bstr.charCodeAt(n);
}
const file: File = new File([u8arr], this.imageName, { type: this.imageFormat })
console.log(file);  }

Upvotes: 4

Related Questions