ng-change function is not firing on a change (when image is added) + how to get the image url from firebase storage bucket

Question

I am new to angularjs. I am trying to call a function by using ng-change. When I add a image then ng-change function is not calling and also if I upload an image in Firebase how can i get that image again.

What I want is first I have upload an image to firebase storage bucket then I want to show that image in html using src tag

here is my html code:

<input name="menuPic" accept="image/png, image/gif, image/jpeg" type="file" ng-model="menuImage" ng-change="uploadImage(menuImage)">

<button ng-click="getImage()">getImage</button>

here is my js code:

$scope.uploadImage=function(menuImage){
    console.log(menuImage); \\here image file is not coming
    console.log(menuImage.files); \\here image file is not coming

    firebase.storage().ref("Rest/"+menuImage.filename).put(menuImage.file);
}

$scope.getImage=function(){
    firebase.storage().ref("Rest/").once('value',function(snap){
        console.log(snap); \\ when iam trying to get the image it showing error like(.once is not a function)
    })
}

Thanks in advance

Answer 1

You seem to be mixing Firebase APIs. firebase.storage().ref("Rest/") is using the Firebase Storage API. But then .once('value',function(snap){ is only available on the Firebase Database API. The two (Storage and Database) are separate features of Firebase, and you cannot simply take the API from one and use it on the other.

If you upload an image to Firebase Storage, you can get notified when that upload completes. If you monitor the upload progress, you can then do something in response to it being completed. But this monitoring of uploads is only available to the device that started the upload.

var imgRef = firebase.storage().ref("Rest/"+menuImage.filename);
var uploadTask = imgRef.put(menuImage.file);
uploadTask.on('state_changed', function(snapshot){
  // Observe state change events such as progress, pause, and resume
  // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
  var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  console.log('Upload is ' + progress + '% done');
  switch (snapshot.state) {
    case firebase.storage.TaskState.PAUSED: // or 'paused'
      console.log('Upload is paused');
      break;
    case firebase.storage.TaskState.RUNNING: // or 'running'
      console.log('Upload is running');
      break;
  }
}, function(error) {
  // Handle unsuccessful uploads
}, function() {
  // Handle successful uploads on complete
  // For instance, get the download URL: https://firebasestorage.googleapis.com/...
  var downloadURL = uploadTask.snapshot.downloadURL;
});

Most of the code above is copied from the documentation I linked, so I recommend you read that thoroughly.

Answer 2

Try this my sample code

Html

<img id="profileImage" src="profileImage" style="max-width:200px; max-height:200px;">
<input type="file" accept="image/*" capture="camera" id="file-upload"> </div>

And angular with js

var refImg = new Firebase("https://YOURURL.firebaseio.com/images/" + $rootScope.authData.uid);
var ImgObj = $firebaseObject(refImg);


function saveimage(e1) {
    var filename = e1.target.files[0];
    var fr = new FileReader();
    fr.onload = function (res) {
        $scope.image = res.target.result;
        ImgObj.image = res.target.result;
        ImgObj.$save().then(function (val) {
        }, function (error) {
            console.log("ERROR", error);
        })
    };
    fr.readAsDataURL(filename);
}

document.getElementById("file-upload").addEventListener('change', saveimage, false);

this.loadimage = function () {
    ImgObj.$loaded().then(function (obj) {
        $scope.profileImage = obj.image;
        console.log("loaded", $scope.profileImage);
        document.getElementById("profileImage").src = obj.image;
    }, function (error) {
        console.log("ERROR", error);
    });
};
this.loadimage();

Answer 3

Angular doesn't support on-change on type=file. See this question and answers.