angular reading a file from file input via readAsDataURL does not work

Question

I have following code.

directive

.directive('area', function () {
    return {
        link: function (scope, el, attrs) {
            var fileReader = new FileReader();

            fileReader.onload = function (e) {
                scope.image = e.target.result;
                scope.$apply();
            }

            el.on('change', function () {
                fileReader.readAsDataURL(el[0].files[0]);
            });
        }
    };
});

controller

.controller('areaController',
    ['$scope', 
        function ($scope) {
            $scope.image = "";
        }
    ]
);

Somehow when I add a image to file input then I get following error

areaDirective.js:19 Uncaught TypeError: Cannot read property '0' of undefined

Shivangi · Accepted Answer · 2015-10-26 10:59:52Z

2

I guess you should modify it to

el.on('change', function (e) {
 var files = (e.srcElement || e.target).files
    fileReader.readAsDataURL(files[0]);
 });

answered Oct 26, 2015 at 10:59

Shivangi

3,0825 gold badges22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular reading a file from file input via readAsDataURL does not work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related