Reset file selection with single file upload with blueimp plugin and AngularJS - angularjs

Question

My settings are as following:
singleFileUploads: false,
// To limit the number of files uploaded with one XHR request,
// set the following option to an integer greater than 0:
limitMultiFileUploads: undefined,
maxNumberOfFiles: 1,
I am trying to allow my client to upload a personal image, after successfully uploading this image,
I would like to reset the file selection, and allow my user to upload another image instead of the first one.
Before setting the maxNumberOfFiles setting to 1, the plugin just tried to upload any new file that the user would select along with the old ones, now, it allows the user to upload a file only once per each visit to the page which contains the plugin instance.
Here is what I've tried so far:
$scope.model.resetFiles = function(){
angular.forEach(
angular.element("input[type='file']"),
function(inputElem){
// angular.element(inputElem).val(null);
angular.element(inputElem).find('.files').empty();
angular.element(inputElem).scope().clear()
});
}

Answer 1

For security reasons, Javascript doesn't allow you to clear the file fields in the manner you'd think. It seems as if creating a new element and replacing the old file field will do the trick though. Check out this link for some more detail, and a code example.
I've seen some people suggesting wrapping the element in a <form> tag and using jQuery's reset() function to reset the form, but if you're not using the full version of jQuery, I don't believe this is included with the jqLite that's used by default by AngularJS.

Answer 2

I've found a temporary solution until the plugin gets updated for better Angular support.
var filePicker = null;
$scope.options = {
done: function (e, data) {
filePicker = data;
}
};
$scope.clearFiles = function () {
filePicker.scope.clear(filePicker.files);
};
Just add the options to the directive like this:
<form file-upload="options" action="import/excelupload" method="POST" enctype="multipart/form-data">

Answer 3

I simply solved it using this simple form reset
document.forms["mediaUploader"].reset();
my directive on the file input was autobinding the files to a scope variable.
after calling forms.reset(); also autobinds files.length to 0 zero so works marvelously!
also check out
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.reset

Answer 4

If file field is wrapped inside form tag then use standard html form reset button type.
<button type="reset" value="Reset">Reset</button>
Also you can put ng-click directive on reset button to perform any changes in $scope.
<button type="reset" value="Reset" ng-click="formReset()">Reset</button>
$scope.resetForm = function (){
// Your business logic after form reset.
}