Multiple images uploading Directive
An image upload angular directive for displaying and getting images.
HTML
<div ng-app="imgRead" ng-controller="Controller">
<form name='myform'>
<div>
<input type="file" id="inputfilem" ng-model="formImages" accept="image/*" image-Reader multiple/>
</div>
<div class="row">
<label ng-repeat="img in formImages" >
<img src="{{img}}" alt="" />
</label>
</div>
<input type="submit" class="btn btn-success btn-group-sm" ng-click="submitImg(myform)" />
</form>
</div>
CSS
/* See The Console for base64 image after submit */
JavaScript
angular.module('imgRead', [])
.controller('Controller', controller)
.directive('imageReader', function ($q) {
var slice = Array.prototype.slice;
return {
restrict: 'A',
require: '?ngModel',
link: function (scope, element, attrs, ngModel) {
if (!ngModel) return;
ngModel.$render = function () {};
element.bind('change', function (e) {
var element = e.target;
$q.all(slice.call(element.files, 0).map(readFile))
.then(function (values) {
if (element.multiple) ngModel.$setViewValue(values);
else ngModel.$setViewValue(values.length ? values[0] : null);
});
function readFile(file) {
var deferred = $q.defer();
var reader = new FileReader();
reader.onload = function (e) {
deferred.resolve(e.target.result);
};
reader.onerror = function (e) {
deferred.reject(e);
};
reader.readAsDataURL(file);
return deferred.promise;
}
});
}
};
});
function controller($scope) {
$scope.submitImg = function (form) {
console.log($scope.formImages);
};
}