StrugglingCoder StrugglingCoder - 6 months ago 204
AngularJS Question

How to reset the file upload control in Angular JS

In my app I have a file upload control ,

<label>Upload File</label>
<div class="ui-select">
<input type="file" name="files" ng-files="getTheFiles($files)" />
</div>


And the controller code that helps uploading files is ...

$scope.file = null;

//UPLOAD FILE CODE
var formdata;
$scope.getTheFiles = function ($files) {
console.log($files[0].type);
formdata = new FormData();
angular.forEach($files, function (value, key) {
formdata.append(key, value);
});
};

// NOW UPLOAD THE FILES.
$scope.uploadFiles = function () {
var request = {
method: 'POST',
url: BasePath + 'uploadNative/UploadFiles/',
data: formdata,
headers: {
'Content-Type': undefined
}
};

// SEND THE FILES.
console.log(formdata);

if (formdata != null || formdata != undefined) {
$http(request)
.success(function (response) {
if (response != "Failed!" && response !="FileAlreadyUploaded") {
console.log("Succeeds");
}
else if(response == "FileAlreadyUploaded")
{
angular.element("#fileUploadModal").modal();

}
else {
console.log("Failed");
}
})
.error(function () {
});
}


I want the file upload control to be cleared up upon success or failure i.e.

after

angular.element("#fileUploadModal").modal();


shows up the modal , I want the control to be cleared up . How would I do that ? Please explain.

Answer

Set an id to file upload control

Html:

<input id= "control" type="file" name="files" ng-files="getTheFiles($files)" />

Controller:

angular.element("#control").value = "";