Upload image to firebase (cloud firestore) storage

lhimelman · December 12, 2017, 5:19pm

This tutorial seems to be the most recent photo upload implementation and is consistent
with a couple others that I’ve found: https://aaronczichon.de/2017/04/18/ionic-firebase-storage/
In my app, when I click the button that calls my upload function, it successfully brings up the camera and allows me to hit “use” on iPhone after taking a picture, but then the photo doesn’t upload to firebase storage. Relevant files are:

addPost.ts

github.com

CSFoodRescueCapstone/foodfinder/blob/master/src/pages/addpost/addpost.ts

import { Component } from '@angular/core';
import { Post } from '../../models/post';
import { NavController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { AngularFirestore } from 'angularfire2/firestore';
import { AngularFireAuth } from "angularfire2/auth";
import { Camera, CameraOptions } from '@ionic-native/camera';
import { ToastService } from '../../services/toast.service';
import { TabsPage } from '../tabs/tabs';

import { ImageProvider } from '../../providers/image/image';

// import { storage } from 'firebase';
import * as firebase from 'firebase';

@Component({
  selector: 'page-addpost',
  templateUrl: 'addpost.html'
})
export class AddPostPage {

This file has been truncated. show original

image.ts

github.com

CSFoodRescueCapstone/foodfinder/blob/master/src/providers/image/image.ts

// import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import * as firebase from 'firebase';

/*
  Generated class for the ImageProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class ImageProvider {

  constructor() {
    console.log('Hello ImageProvider Provider');
  }
  
  uploadImage(image: string, userId: string, photoId: string): any {
    let storageRef = firebase.storage().ref();
    let imageRef = storageRef.child(`${userId}/${photoId}.jpg`);

This file has been truncated. show original

My firebase storage permissions allow read and write for anyone so I don’t think that is the issue. Also, the toast message that shows an error in line 118 does not show up when attempting to upload. Any help would be great, thanks!

floresben82 · January 31, 2018, 2:29pm

@lhimelman Hey, I’ve been struggling with this same issue, I was finally able to get the upload to go. Granted I put the image on the root and will work on putting it in a sub folder. But if you are still working on this issue. I removed ‘data_url’ from…

return imageRef.putString(image, ‘data_url’);

and just have…

return imageRef.putString(image);

Successfully uploaded. I hope this helps.

Ben