Attaching/displaying images in a form using AngularJS - angularjs

Question

Currently learning AngularJS, and I want to use it to upload and display images as part of a way to document project summaries. I found Angular File Upload, but I'm not exactly too sure as to how I should go about implementing it in my program.
Basically what I have so far is a button that generates a form, and clicking the submit adds those fields to a display that generates upon the button click. The text/number fields display fine, but obviously attaching/uploading images would require more work.
Demo picture
I'm using a C9 development environment so I'm not too sure how to make my workspace publicly viewable, but I pasted the main code segments on JSFiddle (it doesn't exactly work properly but at least you can view the JS code):
https://jsfiddle.net/edmond_wu/63v98qt6/9/
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
$scope.global_savings = 0;
$scope.items = [];
$scope.itemsToAdd = [];
$scope.addReport = function(item) {
var index = $scope.itemsToAdd.indexOf(item);
$scope.global_savings += Number(item.savings);
if ($scope.global_savings >= 100000) {
alert("Your benchmark of $100,000 has been reached!");
}
$scope.itemsToAdd.splice(index, 1);
$scope.items.push(angular.copy(item));
}
$scope.addNew = function() {
$scope.itemsToAdd.push({
title: '',
manager: '',
savings: '',
summary: '',
result: '',
image: ''
});
}
The HTML is something like this with a Submit button at the bottom (the submit button should upload the image along with the rest of the form data):
<input type="file" class="button" ng-model="itemToAdd.image" accept="image/*">
<input type="submit" class="button" ng-click="addReport(itemToAdd)">

Answer 1

I don't think you can use ng-model on an input of type="file".
I managed to get it working using a custom directive from here:
app.directive("fileread", [function () {
return {
scope: {
fileread: "="
},
link: function (scope, element, attributes) {
element.bind("change", function (changeEvent) {
var reader = new FileReader();
reader.onload = function (loadEvent) {
scope.$apply(function () {
scope.fileread = loadEvent.target.result;
});
}
reader.readAsDataURL(changeEvent.target.files[0]);
});
}
}
}]);
Then change your input to:
<input type="file" class="button" fileread="itemToAdd.image" accept="image/*">
All you have to do is add directive to your current angular code and change the one line in the html, thats it.
jsfidlle: https://jsfiddle.net/63v98qt6/10/
The above creates a directive fileread which binds the image to the itemToAdd.image of your object on scope.