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

Topic		Replies	Views
Upload photo to firebase storage Ionic Framework	2	338	February 13, 2020
Upload picture via Firebase ionic-v1	8	3600	April 30, 2016
Uploading image to firebase database using ionic native 3.x ionic-v3	0	645	April 4, 2017
Firebase upload & get photo with ionic ionic-v3	18	17469	July 21, 2019
Upload image to firebase using - @angular/fire Ionic Framework	1	732	July 19, 2021

Upload image to firebase (cloud firestore) storage

Related topics