How to clear input file with ng-file-upload directive?

Question

I am new to angular, and I am implementing the ng-file-upload directive. Can someone please show me how to clear the file input after the upload is successful?

I've tried a number of solutions online, and the only one I've managed to make it sort of working is with Jquery: input.replaceWith(input.val('').clone(true));

However, this only seem to clear it by appearance, I am still able to upload the supposedly cleared file if I try to submit again.

If someone could help me out that would be great.

Mathieu Bertin · Accepted Answer · 2014-10-03 07:57:16Z

1

It's pretty simple just do this.

var uploadInstance = $upload.upload({
     url: 'resources/upload',
     file: $files  // for multiple files
})
progress(function (evt) {
    //progress
})
.success(function (data) {
    //Success upload
})
.error(function (data) {
    //Error upload    
});

and when you want uploadInstance to be reset, just call

uploadInstance.abort();

answered Oct 3, 2014 at 7:57

Mathieu Bertin

1,62411 silver badges11 bronze badges

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

Comments

Snowflake · Accepted Answer · 2015-09-18 12:19:22Z

This is working for me, but it's not ideal solution:

HTML:

<form name="photosForm" ng-submit="upload(photos.file)">
  <input type="file"
         name="file"
         ngf-select
         ng-class="{'invalid': photosForm.file.$invalid}"
         ng-model="photos.file"
         required/>
  <button type="submit" ng-disabled="photosForm.$invalid"></button>
</form>

JS:

$scope.upload = function(file) {
  Upload(file).then(function() {
    $scope.photos = { file: undefined };
  }, function(err) {
    $scope.errGallery = err.data.message;
  });
}

CSS:

.invalid {
  color: red;
  border-color: red;
}

Now what this does for me is. It leaves name of the file inside file input, but it will not be valid file inside anymore, as there is no file, it is set to 'undefined'. This is good in a sense that submit button will be disabled and you can't upload twice the same file by mistake, also that 'invalid' css class will be applied as input is required but there is no file set and it will color my input border and text to red.

Collectives™ on Stack Overflow

How to clear input file with ng-file-upload directive?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related