<input> file is not updating/wroking properly in AngularJs

Question

I am trying to write a directive for <input> type file. This directive will handle file change event and I am trying to return following object as a model.

{ fileName: element[0].files[0].name, fileAsBuffer: e.target.result }

My directive code

"use strict";
(function() {
    angular
        .module("fileUploadApp")
        .directive("customFileChange", customFileChange);

    customFileChange.$inject = ["$parse"];

    function customFileChange($parse) {
        return {
            restrict: "A",
            link: function(scope, element, attrs) {
                var model = $parse(attrs.customFileChange);
                var modelSetter = model.assign;
                element.bind("change", function() {
                    scope.$apply(function() {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            var fileModel = {
                                fileName: element[0].files[0].name,
                                fileAsBuffer: e.target.result
                            };
                            modelSetter(scope, fileModel);
                        }
                        reader.onerror = function(e) {
                            console.log(e.target.error);
                        }
                        reader.readAsArrayBuffer(element[0].files[0]);
                    });
                });
            }
        };
    }
})();

My html

<input type="file" name="name" data-custom-file-change="vm.newDocument.attachment" />
<p>{{vm.newDocument.attachment.fileName}}</p>

Problem:

• First time when I upload a file, It is not showing anything in <p>{{vm.newDocument.attachment.fileName}}</p>
• Second time if I upload another file, the It is showing the first file name in <p>{{vm.newDocument.attachment.fileName}}</p>

JS Bin

Answer 1

You need to trigger the digest cycle from inside the callback function itself.

For example:

reader.onload = function (e) {

  var fileModel = { fileName: element[0].files[0].name, fileAsBuffer: e.target.result };

  scope.$apply(function () {
    modelSetter(scope, fileModel);
  });
};

Demo: https://jsbin.com/nicocosige/1/edit?html,js,console,output