Angularjs file upload directive

Question

I am creating a file upload directive to use in forms.

angular.module("app")
    .directive("myFileUpload", [function () {
        return {
            restrict: "E",
            template: '<input type="file" multiple class="form-control" placeholder="Select file">',
            scope: {
                files: "="
            },
            link: function (scope, element) {

                element.change(function (event) {
                    scope.files = event.target.files;
                    event.preventDefault();
                });

            }
        }
    }]);

I can use this directive in somewhere of my application.

<div class="col-sm-9">
    <input ng-model="myform.title">
    <my-file-upload files="myform.files"></my-file-upload>
</div>

And I want to list that selected files like this:

<div class="col-sm-9">
    <input ng-model="myform.title">
    <my-file-upload files="myform.files"></my-file-upload>
    <p ng-repeat="item in myform.files">{{item.filename}}</p>
</div>

If I do not enter text in input myform.title, the files does not list.

Try calling scope.$apply() after assigning scope.files

Fissio
– Fissio

2016-01-11 22:06:46 +00:00
Commented Jan 11, 2016 at 22:06 — Fissio
– Fissio, Commented Jan 11, 2016 at 22:06

Rohit Sharma · Accepted Answer · 2021-06-18 09:24:59Z

1

the callback of

element.change

happens outside of the "angular-world". you will need to let angular know that "something happened" try this instead

element.change(function (event) {
  scope.files = event.target.files;
  event.preventDefault();
  scope.$apply();
});

edited Jun 18, 2021 at 9:24

Rohit Sharma

3,3442 gold badges21 silver badges39 bronze badges

answered Jan 11, 2016 at 22:08

Patrick Kelleter

2,7911 gold badge17 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

Angularjs file upload directive

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related