angularjs - how to get files attribute in input tag without using getElementById

Question

I'm Uploading files with AngularJS. How to get the input files just like regular JS?

This is what I need to simulate exactly
HTML:

<input type="file" name="file" id="fileImg" accept="image/*">

JS:

var filesUpload = document.getElementById("fileImg").files

This is what I have now
HTML:

<input type="file" name="file" ng-model="image" accept="image/*">
<input type="button" ng-click="submit()" value="press me">

Angular:

angular
        .module('app')
        .controller("productsCtrl", function($scope) {

            $scope.image = {};


            $scope.submit = function() {

                var filesUpload = ????????????????
            }
         }

So, how to get the "files" in the input withput using "getElementById" ?
notice - can't change nothing , only the "??????"

any help will be appreciated..
tnx

Ashot · Accepted Answer · 2016-10-11 19:16:08Z

2

You can use custom directive

var app = angular.module('App', []);

app.controller('Main', function($scope, $timeout, $rootScope){
    $scope.onSubmit = function(){
        console.log($scope.file);
    }
});

app.directive('fileRead', [function () {
    return {
       scope: {
        fileRead: '='
       },
       link: function (scope, elem, attrs) {
           elem.bind('change', function (event) {
             scope.$apply(function () {
                scope.fileRead = event.target.files[0];
             });
           });
       }
    }
 }]);

usage

 <div ng-app="App">
    <div ng-controller="Main">
        <form ng-submit="onSubmit()">
            <input type="file" name="someName" file-read="file">
            <button type="submit">Submit</button>
        </form>
    </div>
 </div>

answered Oct 11, 2016 at 19:16

Ashot

1,3091 gold badge12 silver badges13 bronze badges

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

4 Comments

Sahar Millis Over a year ago

sadly i can't use a directive. bummer, i know. thank anyway dude.

Ashot Over a year ago

This is a nice solution, if you don't want to use directive, you can add some id to your input field, then in submit handler get files in this way . var fileElement = document.getElementById('file'); var files = fileElement.files;

Sahar Millis Over a year ago

it's a Constraint, not a wish of mine.

Sahar Millis Over a year ago

and ya the one with the ID , is not possible at this time.

Collectives™ on Stack Overflow

angularjs - how to get files attribute in input tag without using getElementById

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related