Reset file selection with single file upload with blueimp plugin and 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()
    });
}

score 1 · Answer 1 · answered Oct 29 '13 at 20:40

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.

answered Oct 29 '13 at 20:40

robert.bo.roth

1,343
3
14
24

It's an AngularJS upload plugin, I don't believe that this might be a solution, sorry. Thank you for your reponse – Oleg Belousov Oct 30 '13 at 08:07
No problem. I'm currently working on some file uploads for my AngularJS app, so if I see anything else that works in Angular, I'll let you know. – robert.bo.roth Oct 31 '13 at 14:23
Using FormData object with an 'undfined' content type header should do the trick, unless you need a fallback for IE < 10 – Oleg Belousov Nov 02 '13 at 14:19

score 1 · Answer 2 · answered Jun 26 '14 at 14:07

1

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">

answered Jun 26 '14 at 14:07

DavidCru

46
5

Seems to work, but the plugin does lack a good support for angular. – Oleg Belousov Sep 14 '14 at 07:32

score 1 · Answer 3 · answered Aug 26 '14 at 09:10

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

score 0 · Answer 4 · answered Sep 13 '14 at 04:22

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.   

}

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

4 Answers4