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