I have a directive that detects the change of a file input and aims to set a model. However the imagefile model is not being set after the file change. I have been able to print out the values of controller.modelValue[0].name and it is set. However when it returns the image file model is null.
Any suggestions on how to fix this or what am I doing incorrect?
The HTML code is here
<input type="file" id="fileInput" multiple ng-model="imagefile" file-feed/>
The directive for the file-feed attribute is
.directive('fileFeed', [
function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attributes, controller) {
element.bind("change", function(changeEvent) {
//alert("fired");
var files = [];
for (var i = 0; i < element[0].files.length; i++) {
//alert(element[0].files[i].name);
files.push(element[0].files[i]);
}
controller.$modelValue = files;
scope.$apply(function(){
**controller.$modelValue = files;**
console.log(controller.$modelValue[0].name);
});
});
}
};
}
]);
The modal controller is here
.controller('ProfilePictureModalInstanceCtrl', function ($scope, $modalInstance, items, $timeout) {
$scope.imagefile = "";
$scope.checkImageFiles = function(){
console.log($scope.imagefile);
}
$scope.ok = function () {
$modalInstance.close($scope.optionItems);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
})
I have a button in the modal that calls a function in the controller to print out the value of image file.
<button ng-click="checkImageFiles()">Check Images</button>
I am trying to return the file via the controller.modelValue property