Angular js Input type file - clear previously selected file

Question

I am using input type="file" for my upload control using angular js. Everytime I click on browse, I do not want to see the previously selected file. By default,this seems to be retained. Can it be achieved by writing a directive? Can it be triggered everytime I click on browse?

I am using a bootstrap implementation to replace default browse button with some better.

 <span class="useBootstrap btn btn-default btn-file">
                Browse <input type="file"  />
            </span>

Solution

This was the easiest way, without using any directive or complex code.

Browse <input type="file" ng-click="clear()" 

And in your controller

 $scope.clear = function () {
    angular.element("input[type='file']").val(null);
};

Comments

[user804401]

see if this helps stackoverflow.com/questions/15079779/…

[Ch Faizan Mustansar]

Yes, indeed this is an easiest way.... But it is not the right way. I have gone through the trouble of rewriting the whole code once again in the form of directives and all, thats why I cannot recommend this approach.

[Eddy]

This complained that it cannot use jqLite for selectors. But this worked fine: var myEl = angular.element( document.querySelector( '#some-id' ) );

[Mawg says reinstate Monica]

If you want a separate Clear or Cancel button, add an id= to the element. E.g. id="fileSelector_1" and then angular.element(document.querySelector('#fileSelector_1')).v‌​al(null);` This works for me. I use it to clear on both the Save and Cancel buttons,