Upload picture via Firebase

Hello Everybody

i m developping an app that use service that share picture beetween contacts like snapshot but i’m using Firebase and we can’t upload a picture on firebase so is there a solution ? Thank’s

@Benayed this post covers how to upload a picture to firebase: http://stackoverflow.com/questions/13955813/how-can-i-view-and-store-images-in-firebase

In particular here’s the example demo they’ve built: https://github.com/firebase/firepano

Hope that helps!

@sakotturi Thank you but can you give me a snap on how do you use it in ionic with angular ?

If you’re using the camera plugin, you can save the image as a base64 string

Other wise, you would jsut convert the image to base64 and upload that string.

hy mhartinggon, I’ve get the picture and stored it to a form, but when callback the picture with ng-model and the picture varible imgURI it can’t store to database,.

here my form

<ion-view style="" title="Register">
  <ion-nav-buttons side="right">
    <button class="button button-clear customHeaderIcon customHeaderIconSmall" ng-click="createMember(user)">Save</button>

  <ion-content class="has-header" overflow-scroll="false" padding="true">

    <div style="background-color: rgb(255, 255, 255); border: 1px solid rgb(238, 238, 238); border-radius: 3px; text-align: center;">
      <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}" height="auto" width="100%" ng-model="user.picture">
      <img ng-show="imgURI === undefined" ng-src="img/register.jpg" ng-model="user.picture">
      <button ng-click="doAction()" class="button button-register">
                <i class="icon ion-ios-person-outline"></i>


    <form style="" class="list">
      <ion-item style="" class="item-divider">Basic Information</ion-item>
      <label style="" name="name" class="item item-input">
                <input placeholder="First Name" type="text" ng-model="user.firstname">
      <label style="" name="name" class="item item-input">
                <input placeholder="Surename" type="text" ng-model="user.surename">
      <label style="" name="email" class="item item-input">
                <input placeholder="Email" type="email" ng-model="user.email">
      <label style="" name="password" class="item item-input">
                <input placeholder="Password" type="password" ng-model="user.password">
      <label style="" name="phone" class="item item-input">
                <input placeholder="Phone" type="tel" ng-model="user.phone">
      <label style="" name="birthday" class="item item-input">
                <input placeholder="Birthday" type="date" ng-model="user.birthday">
      <div style="width: 283px; height: 46px;" class="spacer"></div>

img controller

var options = {
  quality: 75,
  destinationType: Camera.DestinationType.DATA_URL,
  sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
  allowEdit: true,
  encodingType: Camera.EncodingType.JPEG,
  targetWidth: 300,
  targetHeight: 300,
  popoverOptions: CameraPopoverOptions,
  saveToPhotoAlbum: false

$cordovaCamera.getPicture(options).then(function(imageData) {
  $scope.imgURI = "data:image/jpeg;base64," + imageData;
}, function(err) {
  // An error occured. Show a message to the user

firebase controller
$scope.temp = {
  firstname: user.firstname,
  surename: user.surename,
  email: user.email,
  phone: user.phone,
  picture: imgURI,
  birthday: user.birthday,
  houseid: 0,
  datecreated: Date.now(),
  dateupdated: Date.now()

var membersref = MembersFactory.ref();
var newUser = membersref.child(authData.uid);
newUser.update($scope.temp, function(ref) {});

can you help me,???

Whats the error message you’re receiving?
Are you getting back a base64 string as imageData?
In the example app, it’s not posting the whole data:imgae...., but rather the raw imageData string to the DB

hello all,

i have a similar problem or issue i upload my image from a form through ng-file-upload to firebase as base64 and i tried it , it work.

but the issue is that i try to retrieve all my data from firebase and i place them in ionic list but the thing is that the username was display but their image was not shown (something like broken images)

hy mhartington, thanks for your help,.
I’ve fix my problems with create service to save picture for a while before I send it to firebase.
now it solved,.

hy zionnite,.
we can’t help you without see how you set html code to retrieve your image,.
but you can try this code to retrieve your image

may it help you,.