Upload picture via Firebase

ionic-v1
1

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

2

@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!
-Sante

3

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

4

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.

5

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-nav-buttons>

  <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>

            </button>

    </div>
    <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>
      <label style="" name="name" class="item item-input">
                <input placeholder="Surename" type="text" ng-model="user.surename">
            </label>
      <label style="" name="email" class="item item-input">
                <input placeholder="Email" type="email" ng-model="user.email">
            </label>
      <label style="" name="password" class="item item-input">
                <input placeholder="Password" type="password" ng-model="user.password">
            </label>
      <label style="" name="phone" class="item item-input">
                <input placeholder="Phone" type="tel" ng-model="user.phone">
            </label>
      <label style="" name="birthday" class="item item-input">
                <input placeholder="Birthday" type="date" ng-model="user.birthday">
            </label>
      <div style="width: 283px; height: 46px;" class="spacer"></div>
    </form>
  </ion-content>
</ion-view>

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()
}

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

can you help me,???

6

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

7

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)

8

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,.

9

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,.