How to clear a file input from Angular JS

Question

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

• https://groups.google.com/forum/?fromgroups=#!topic/angular/-OpgmLjFR_U
• http://jsfiddle.net/marcenuc/ADukg/89/

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.

Answer 1

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.

Answer 2

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.