angularfire: ERROR Error: [object Object] while uploading images in storage

Hi Team,

I am developing one application and I have used ionic 3.9.2 and I am trying to upload an image in firebase storage and the angularfire 2 version is 5.0.0-rc.4 and firebase 4.8.0.

I tried to get the image from Camera

 const cameraOptions: CameraOptions = {
      quality: 50,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
    };

    this.camera.getPicture(cameraOptions).then((imageData) => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64:
      this.captureDataUrl = 'data:image/jpeg;base64,' + imageData;
    }, (err) => {
      // Handle error
    });

And then uploading the image in firebase storage


import * as firebase from 'firebase';
  let storageRef = firebase.storage().ref();
    // Create a timestamp as filename
    const filename = Math.floor(Date.now() / 1000);

    // Create a reference to 'images/todays-date.jpg'
    const imageRef = storageRef.child(`myname/${filename}.jpg`);

    imageRef.putString(this.captureDataUrl, firebase.storage.StringFormat.DATA_URL).then((snapshot)=> {
      // Do something here when the data is succesfully uploaded!
     });

I am getting an error as

abc.html:217 ERROR Error: [object Object]
    at viewWrappedDebugError (vendor.js:9858)
    at callWithDebugContext (vendor.js:15104)
    at Object.debugHandleEvent [as handleEvent] (vendor.js:14681)
    at dispatchEvent (vendor.js:10058)
    at vendor.js:10672
    at HTMLButtonElement.<anonymous> (vendor.js:40181)
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (vendor.js:4974)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 23 (6 by maintainers)

Most upvoted comments

Hi there,

I just managed by writing the below code:

Html File <input type="file" (change)="registerNewCandidate($event)" />

Source Code

firebase.storage().ref().child('myupload/mountains.jpg').put(event.srcElement.files[0]).then(function(snapshot) {
      snapshot.downloadURL;
});

I hope this help

anup5708 on Feb 12, 2018

@BluebambooSRL I’m the guy that wrote that post. I also use the same basic process here https://angularfirebase.com/lessons/google-cloud-vision-with-ionic-and-firebase/

codediodeio on Apr 1, 2018

I actually found that I was able to do the same as @codediodeio using

const path = `test/${new Date().getTime()}_${this.auth.getUid()}.jpg`;
  this.storage.ref(path).putString(photo, 'data_url');

Bengejd on Jan 29, 2018

Rather than use the entire firebase SDK, why not use AngularFireStorage? Using your camera capture code, I was able to upload successfully:

constructor(private storage: AngularFireStorage) { }

  upload() {
    const img = 'data:image/jpeg;base64,' + base64fromCamera;
    this.storage.ref('cool.jpeg').putString(img, 'data_url');
  }

codediodeio on Jan 28, 2018

@Heckthor

I just noticed an issue with my Ionic 3/Angular 5 PWA (that uses angularfire2) when trying to upload files on iOS 11.4.1.

It turns out it is related to Safari’s experimental support for Service Workers.

my-page-component.ts:

...
import { AngularFireStorage, AngularFireUploadTask } from 'angularfire2/storage';
import { Observable } from 'rxjs/Observable';
...

  private downloadURL: Observable<string>;

  public uploadFile(event) {

    const file = event.target.files[0];
    const filePath = 'reviews' + '/' + this.beer.id + '/' + this.authService.getUserId();
    const task: AngularFireUploadTask = this.afStorage.upload(filePath, file);

    this.downloadURL = task.downloadURL();

    this.downloadURL.subscribe((url) => {

      // do stuff

    });
  }

main.ts:

platformBrowserDynamic().bootstrapModule(AppModule).then(() => {

  const isIos = () => {
    const userAgent = navigator.userAgent.toLowerCase();
    return /iphone|ipad|ipod/.test(userAgent);
  };

  if (isIos()) {

    // https://github.com/angular/angular/issues/23244
    console.log('Service Worker not registered');

  } else {

    // https://stackoverflow.com/questions/48723206/angular-5-service-worker-not-working
    // Seems to be a problem in registering service worker in module where also importing AngularFire2
    if ('serviceWorker' in navigator && ENV.production) {
      navigator.serviceWorker.register('/ngsw-worker.js');
      console.log('Service Worker registered');
    }

  }

}).catch(error => console.log(error));

Robinyo on Sep 13, 2018

Going to close since it’s not clear that this is an issue with AF2, please provide a repro if you reopen.

jamesdaniels on May 4, 2018