0

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

TommyK
  • 416
  • 2
  • 6
  • 24

0 Answers0