How to clear a file input from Angular JS

Question

In AngularJS, I'm using the approach described here to handle input type=file.

Markup:

<div ng-controller="MyCtrl">
    <input type="file" onchange="angular.element(this).scope().setFile(this)">
    {{theFile.name}}
</div>

Controller:

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

myApp.controller('MyCtrl', function($scope) {
    $scope.setFile = function(element) {
        $scope.$apply(function($scope) {
            $scope.theFile = element.files[0];
        });
    };
});

As mentioned it's a bit of a hack, but it mostly works for my purposes. What I need however is a way to clear the file input after the upload has finished - ie: from the controller.

I could completely hack it and use jQuery or something to find the input element and clear it, but was hoping for something a little more elegant.

ovidiu · Accepted Answer · 2013-06-19 01:21:01Z

37

Upon a successful upload, I clear up the input type file elements explicitly from my controller, like so:

  angular.forEach(
    angular.element("input[type='file']"),
    function(inputElem) {
      angular.element(inputElem).val(null);
    });

The input[type='file'] selector requires jQuery, but everything else is plain Angular.

edited Jun 19, 2013 at 1:21

answered Jun 18, 2013 at 20:17

ovidiu

1,1291 gold badge10 silver badges10 bronze badges

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

4 Comments

Soviut Over a year ago

You really shouldn't be doing DOM manipulation in the controller. This is what directives are for.

Tomas McGuinness Over a year ago

This doesn't work for me. If I try and select the same file again, the onchange isn't fired. Any ideas?

newman Over a year ago

This works fine for me. For some reasons, I couldn't make the accepted directive work (maybe my fault since I have more stuff in input tag).

Thijs Over a year ago

If you don't want to use jQuery, you can use document.getElementById('inputId').value = null;

Tosh · Accepted Answer · 2013-02-26 01:56:02Z

11

I would definitely use directive for this kind of task.

http://plnkr.co/edit/xLM9VX

app.directive('fileSelect', function() {
  var template = '<input type="file" name="files"/>';
  return function( scope, elem, attrs ) {
    var selector = $( template );
    elem.append(selector);
    selector.bind('change', function( event ) {
      scope.$apply(function() {
        scope[ attrs.fileSelect ] = event.originalEvent.target.files;
      });
    });
    scope.$watch(attrs.fileSelect, function(file) {
      selector.val(file);
    });
  };
});

note: it is using jquery for element creation.

answered Feb 26, 2013 at 1:56

Tosh

36k11 gold badges67 silver badges58 bronze badges

3 Comments

Brad Robinson Over a year ago

Nice. The only issue I've noticed is that after selecting a file, there's an error in the console log about an invalid HTML element in the scope.$watch function. (Running in Chrome)

Brad Robinson Over a year ago

Workaround is to change "selector.val(file);" to "if (file==null) selector.val(file);"

slugmandrew Over a year ago

This kind of answer is quite frustrating without any explanation.

yossi · Accepted Answer · 2014-11-25 22:20:24Z

10

my solution without using $scope.

app.directive('fileChange',['UploadService',function (UploadService) {
    var linker = function (element, attrs) {
        element.bind('change', function (event) {
            var files = event.target.files;
            UploadService.upload({'name':attrs['name'],'file':files[0]});
            element.val(null);  // clear input
        });
    };
    return {
        restrict: 'A',
        link: linker
    };
}]);

answered Nov 25, 2014 at 22:20

yossi

13.4k28 gold badges91 silver badges112 bronze badges

2 Comments

Hao Over a year ago

this should be the best answer. short and elegant. Wonder why use a selector in directive when we have linker.

anatol Over a year ago

how it could be rewritten for a component instead of directive?

Anil Singh · Accepted Answer · 2015-01-28 06:02:19Z

6

It might help you!!

HTML code sample

 <input type="file" id="fileMobile" file-model="myFile">
 <button type="button" class="btn btn-danger" id="i-agree" ng-click="uploadFile()"> Upload </button>

AngularJs code sample

$scope.uploadFile = function () {
    var file = $scope.myFile;
    mobileService.uploadBulkFile(file).then(function (resp) {
        if (resp !== undefined) {
            $('#fileMobile').val('');
        }
    });
};

answered Jan 28, 2015 at 6:02

Anil Singh

4,2224 gold badges45 silver badges49 bronze badges

Comments

Jignesh Mesvaniya · Accepted Answer · 2017-11-20 05:37:09Z

3

You can use ID to reset file field.

<div class="col-md-8">  
    <label for="files">Select File</label>
    <input type="file" id="file_upload" class="form-control">
</div>

After uploading clear it.

var fileElement = angular.element('#file_upload');
angular.element(fileElement).val(null);

Above example working good for me. Will work for you too.

answered Nov 20, 2017 at 5:37

Jignesh Mesvaniya

4106 silver badges6 bronze badges

Comments

Stephan · Accepted Answer · 2018-04-11 19:35:55Z

2

In my case, I broadcast events when a file upload succeeds. So my directive watches for the broadcast, and clears the selection.

app.directive("fileInput", function( APP_EVENTS ){
    return{
        require: "ngModel",
        link: function postLink( scope, elem, attrs, ngModel ){

            elem.on("change", function( e ){
                var files=elem[0].files;
                ngModel.$setViewValue( files );
            });

            scope.$on( APP_EVENTS.FILE_UPLOAD_SUCCESS, function( event ){
                elem.val( null );
            });
        }
    }
});

It's used like so:

<input type="file" name="myFieldName" ng-model="myModel" file-input/>

answered Apr 11, 2018 at 19:35

Stephan

6868 silver badges23 bronze badges

1 Comment

Trevor Bye Over a year ago

this is perfect.

Collectives™ on Stack Overflow

How to clear a file input from Angular JS

6 Answers 6

4 Comments

3 Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

3 Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related