Error: Firebase.set failed: First argument contains undefined in property 'achv_img'

Question

Having form using angular and firebase achievementsapp.firebaseapp.com, you can register and then if you click on the green plus it should pop the form, upload button is not working and when click on Add button it gives me this error Error: Firebase.set failed: First argument contains undefined in property 'achv_img'

controller code:

myApp.controller('MeetingsController',
  function($scope, $rootScope, $firebase, Uploader,
    CountMeetings, FIREBASE_URL) {

  var ref = new Firebase(FIREBASE_URL + '/users/' + 
    $rootScope.currentUser.$id + '/meetings');

  var meetingsInfo = $firebase(ref);
  var meetingsObj = meetingsInfo.$asObject();

  meetingsObj.$loaded().then(function(data) {
    $scope.meetings = data;
  }); //make sure meetings data is loaded

  $scope.addMeeting = function() {
    meetingsInfo.$push({
      name: $scope.meetingname,
      description: $scope.meetingdescription,
      achv_type: $scope.achvtype,
      achv_date: $scope.achvdate,
      achv_img : $scope.achvimg,
      date: Firebase.ServerValue.TIMESTAMP
    }).then(function() {
      $scope.meetingname='';
      $scope.achvtype = '';
      $scope.meetingdescription='';
      $scope.achvdate='';
      $scope.achvimg= $scope.meetingsInfoImgData;
    });
    Uploader.create($scope.meetingsInfo);


  $scope.handleFileSelectAdd = function(evt) {
    var f = evt.target.files[0];
    var reader = new FileReader();
    reader.onload = (function(theFile) {
      return function(e) {
        var filePayload = e.target.result;
        $scope.meetingsInfoImgData = e.target.result; 
        document.getElementById('pano').src = $scope.meetingsInfoImgData; 
      };
    })(f);
    reader.readAsDataURL(f);
  };
  document.getElementById('file-upload').addEventListener('change', $scope.handleFileSelectAdd, false);


  }; //addmeeting

  $scope.deleteMeeting = function(key) {
    meetingsInfo.$remove(key);
  }; //deleteMeeting

}); //MeetingsController

Some help below. Note that StackOverflow is a notoriously inefficient debugging service. If you're still stuck, consider setting up a minimal reproduction in a jsfiddle/jsbin (like the one I created in answer to the question you link to) and post that URL. — Frank van Puffelen, Aug 13 '15 at 14:10

score 3 · Answer 1 · answered Aug 13 '15 at 14:09

3

In reader.onload() you take the image data from the file and put it into $scope.meetingsInfoImgData:

reader.onload = (function(theFile) {
  return function(e) {
    var filePayload = e.target.result;
    $scope.meetingsInfoImgData = e.target.result; 
    document.getElementById('pano').src = $scope.meetingsInfoImgData; 
  };
})(f);

My original answer then uses its equivalent of this $scope.meetingsInfoImgData later to populate the JavaScript object that it sends to Firebase:

$scope.episode.img1 = $scope.episodeImgData;
var episodes = $firebase(ref).$asArray();
episodes.$add($scope.episode);

Your code does nothing with $scope.meetingsInfoImgData when it tries to create the object in Firebase. You'll probably need something akin to $scope.episode.img1 = $scope.episodeImgData; in your code too.

answered Aug 13 '15 at 14:09

Frank van Puffelen

565,676
79
828
807

Thank you Frank, I did a mistake now it's better https://jsfiddle.net/9cazhb44/ the page didn't load perfectly, tho I did deploy it here https://achievementsapp.firebaseapp.com just register. If you open meetings.js I want .img1 $scope inside $scope.addMeeting function, how would this work? – molham Aug 16 '15 at 04:15
That fiddle is still a full app, just non-functional. If you isolate the problem to a minimal-but-complete reproduction, I can probably help. Please read http://stackoverflow.com/help/mcve and apply. – Frank van Puffelen Aug 16 '15 at 04:28
Im using angular and firebase, i can't say a way to put this code in fiddle, here's the minified version https://jsfiddle.net/9cazhb44/5/ – molham Aug 16 '15 at 04:36
Here's an example of using AngularFire in a fiddle: http://jsfiddle.net/firebase/cWBQH/ – Frank van Puffelen Aug 16 '15 at 04:46
Thank you it help, I put the code like the example https://jsfiddle.net/9cazhb44/9/ i'm getting this error {"error": "Please use POST request"} – molham Aug 16 '15 at 04:58

score 1 · Answer 2 · answered Jan 30 '17 at 11:16

If for some reason you can not fix it at the source, to make sure your object does not contain any undefined props use this simple trick: JSON.parse( JSON.stringify(ObjectToSave ) )

For more info take a look at this codePen: http://codepen.io/ajmueller/pen/gLaBLX

Error: Firebase.set failed: First argument contains undefined in property 'achv_img'

2 Answers2