Angular js Input type file - clear previously selected file Angular js Input type file - clear previously selected file angularjs angularjs

Angular js Input type file - clear previously selected file


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);};


here is alternate way to clear input file type. HTML ->>`<span class="useBootstrap btn btn-default btn-file">   Browse <input type="file" ng-if="clearBtn" /></span>`Js ->>`//initial loading$scope.clearBtn = true;// after submit / on reset function$scope.submitform = function(){//submit logic goes here;//onsuccess function$scope.clearBtn = false;  $timeout(function(){    $scope.clearBtn = true;  });}`


If we use fileUpload directive, then we can clear uploaded file data directly from HTML.

e:g-

Directive -

app.directive('fileModel', ['$parse', function ($parse) {  return {    restrict: 'A',    link: function (scope, element, attrs) {      var model = $parse(attrs.fileModel)      var modelSetter = model.assign      element.bind('change', function () {        scope.$apply(function () {          modelSetter(scope, element[0].files[0])        })  })}

}}])

html code- upload file input field

<button ng-disabled="!myFile" class="btn btn-primary btn-rounded btn-ef btn-        ef-5 btn-ef-5a mb-10 "ng-click="uploadFile(myFile);myFile=''">Upload button</button><button class="btn btn-danger btn-rounded btn-ef btn-ef-5 btn-ef-5a mb-10 "ng-click="myFile=''">Clear</button>

call http service

  var fd = new FormData()   fd.append('file', file) //File is from uploadFile(myFile)   $http.post(url, fd, {        transformRequest: angular.identity,        headers: {          'Content-Type': undefined,          'sessionId': sessionId,          'project': userProject        }      })