错误：Firebase.set失败：第一个参数在属性“ achv_img”中包含未定义

Question

I followed this post

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

Answer 1

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.

Answer 2

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