Attaching/displaying images in a form using 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)">

score 1 · Accepted Answer · edited May 23 '17 at 12:24

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.

edited May 23 '17 at 12:24

Community

1
1

answered May 31 '16 at 19:35

James P

2,201
2
20
30

Thanks I'll try this out. Due to unfamiliarity with AngularJS, how do I take this directive and append the image to the array that stores the object representation? – Ed Wu Jun 01 '16 at 18:48
I see. The image isn't showing up however, so is there anything to do about that? Moved the script to tags since it doesn't seem to work externally https://jsfiddle.net/edmond_wu/63v98qt6/11/ – Ed Wu Jun 01 '16 at 19:37
Think you must have missed something when you copied over code - working for me here - https://jsfiddle.net/63v98qt6/16/ – James P Jun 01 '16 at 21:45
Yeah must've been the case. Thanks! – Ed Wu Jun 02 '16 at 14:03

Attaching/displaying images in a form using AngularJS

1 Answers1