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

robert.bo.roth · Accepted Answer · 2013-10-29 20:40:22Z

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, 2013 at 20:40

robert.bo.roth

1,3534 gold badges15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Oleg Belousov Over a year ago

It's an AngularJS upload plugin, I don't believe that this might be a solution, sorry. Thank you for your reponse

robert.bo.roth Over a year ago

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.

Oleg Belousov Over a year ago

Using FormData object with an 'undfined' content type header should do the trick, unless you need a fallback for IE < 10

DavidCru · Accepted Answer · 2014-06-26 14:07:10Z

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, 2014 at 14:07

DavidCru

561 silver badge5 bronze badges

1 Comment

Oleg Belousov Over a year ago

Seems to work, but the plugin does lack a good support for angular.

Oguzhan · Accepted Answer · 2014-08-26 09:10:39Z

1

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

answered Aug 26, 2014 at 9:10

Oguzhan

7346 silver badges12 bronze badges

Comments

Harshal Dhumal · Accepted Answer · 2014-09-13 04:22:14Z

0

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.   

}

answered Sep 13, 2014 at 4:22

Harshal Dhumal

1,4391 gold badge13 silver badges18 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related