firebase - Passing base64 string to object's attribute in AngularJS

Question

I'm trying to upload an image via an input field, tie the base64 of the image to a variable, then add that variable to the attribute of an object so I can store it in my Firebase db.

Input form & field for object:

      <div class="row modalDetail">
              <h3>New Episode</h3>
              <table class="">
                <tbody>
                  <tr>
                    <td class="labelField">Name</td>
                    <td><input type='text' ng-model='episode.name'></td>
                  </tr>
                  <tr>
                    <td class="labelField">Title</td>
                    <td><input type='text' ng-model='episode.title'></td>
                  </tr>
                  <tr>
                    <td class="labelField">Description</td>
                    <td><input type='text' ng-model='episode.shortDescription'></td>
                  </tr>
                  <tr>
                    <td class="labelField">Time</td>
                    <td><input type='text' ng-model='episode.time'></td>
                  </tr>
                </tbody>
              </table>
              <img src="../images/placeholder.png" id="pano">

              <!-- START Image File Upload -->        
                <td class="labelField">Image</td>
                <span class="btn btn-default btn-file">
                  <input type="file" accept="image/*" capture="camera" id="file-upload">
                </span>
                <div id="spin"></div>

              <div class='btn btn-warning' ng-click='createEpisode()'> Create an Episode</div>
      </div>

The service for uploading to Firebase:

'use strict';

app.service('Uploader', ['$firebase', 'FIREBASE_TEST_URL', function($firebase, FIREBASE_TEST_URL) {

    var ref = new Firebase(FIREBASE_TEST_URL);

    var episodes = $firebase(ref);

    return {
        all: episodes,
        create: function(episode) {
            location.reload();
            //Add to firebase db
            return episodes.$add(episode);
        },
        delete: function(episodeId) { 
            location.reload();
            return episodes.$remove(episodeId);
        },
        update: function(episode) {
            location.reload();
            return episodes.$save(episode);
        }
    };
}]);

Controller that has the file handling for the image, etc.:

'use strict';

app.controller('UploadCtrl', ['$scope', 'Uploader', function ($scope, Uploader) {

$scope.episodes = Uploader.all;

$scope.createEpisode = function(){
    Uploader.create($scope.episode).then(function(data){
        $scope.episode.name = '';
        $scope.episode.title = '';
        $scope.episode.description = '';
        $scope.episode.time = '';
        $scope.episode.img1 = $scope.episodeImgData;
    });
};

$scope.deleteEpisode = function(episodeId){
    bootbox.confirm('Are you sure you want to delete this episode?', function(result) {
        if (result === true) { 
            Uploader.delete(episodeId).then(function(data){
                console.log('Episode successfully deleted!');
            });
        }
    });
};

$scope.updateEpisode = function(episode) {
    Uploader.update($scope.episode).then(function(data) {
        console.log(episode);
        console.log('Episode successfully updated.');
    });
};

$scope.selectEpisode = function(object) {
    $scope.selectedEpisode = object;
    setTimeout(function(){ $scope.$apply($scope.selectedEpisode = object); });
};

// ********************************************************************************** //
// START Image Upload: https://github.com/firebase/firepano/blob/gh-pages/firepano.js //
// REQUIRED: app/scripts/js/crypto.js in index.js
var spinner = new Spinner({color: '#ddd'});
$scope.episodeImgData = '../images/defaultplaceholder.png';

function handleFileSelectAdd(evt) {
  var f = evt.target.files[0];
  var reader = new FileReader();
  reader.onload = (function(theFile) {
    return function(e) {
        var filePayload = e.target.result;
        var hash = CryptoJS.SHA256(Math.random() + CryptoJS.SHA256(filePayload));

        $scope.episodeImgData = e.target.result; 

        document.getElementById('pano').src = $scope.episodeImgData; 
        console.log($scope.episodeImgData);
    };
  })(f);
  reader.readAsDataURL(f);
}

function handleFileSelectEdit(evt) {
  var f = evt.target.files[0];
  var reader = new FileReader();
  reader.onload = (function(theFile) {
    return function(e) {
        var filePayload = e.target.result;
        var hash = CryptoJS.SHA256(Math.random() + CryptoJS.SHA256(filePayload));

        $scpope.episodeImgData = e.target.result; 

        document.getElementById('pano2').src = $scope.episodeImgData; 
        $scope.selectedEpisode.img1 = $scope.episodeImgData;
        console.log($scope.episodeImgData);
    };
  })(f);
  reader.readAsDataURL(f);
}

$(function() {
    $('#spin').append(spinner);
    document.getElementById('file-upload').addEventListener('change', handleFileSelectAdd, false);  
    document.getElementById('file-upload2').addEventListener('change', handleFileSelectEdit, false); 

});
// END Image Upload: https://github.com/firebase/firepano/blob/gh-pages/firepano.js //
// ******************************************************************************** //
}]);

All the attributes in the form save to the DB except img1. When the update button is clicked, I thought I could just pass in episodeImgData to the object (img1 variable) to save, but it doesn't save anything at all (just the form variables tied to episode.name, etc.). What's the best way to do this? I'm using parts of the FirePano example (https://github.com/firebase/firepano/blob/gh-pages/firepano.js) for the image handling.

Answer 1

Waitting for answers