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>
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);
};
Clear or Cancel button, add an id= to the element. E.g. id="fileSelector_1" and then angular.element(document.querySelector('#fileSelector_1')).val(null);` This works for me. I use it to clear on both the Save and Cancel buttons,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
}
})
You can do it very easily, here's an example:
<input type="file" accept="image/jpeg" id="fileInp" required file-input="files" >
//in my code the rest happens when a response is sent from the server
$http.post('upload.php', form_data,
{
transformRequest: angular.identity,
headers: {'Content-Type': undefined,'Process-Data': false}
}).success(function(response){
$scope.response_msg=response;
if($scope.response_msg=="File Uploaded Successfully")
{
$scope.IsVisibleSuccess = $scope.IsVisibleSuccess = true;
}
else
{
$scope.IsVisibleFailed=$scope.IsVisibleFailed=true;
}
$scope.img_name='';
$("input[type='file']").val('');
});
