File Upload reset in AngularJS

Question

I am trying to create a image upload functionality in Angular 1. I have to allow user to upload image, remove the uploaded image, change the image.I am able to do all this but when the user removes the uploaded image and re-uploads the same image then change event is not firing and user is not able to upload the same image again. Error on console is Uncaught SyntaxError: Unexpected end of input. I am using Google Chrome. However, if we try to upload some other image then it works fine.

I have created a plunker to demo my code so far. Here is the link: https://plnkr.co/edit/bjdU2kuAqRA9yHE1CmX4?p=preview

Can someone help me to figure out what's the issue?

Edit: The default "Choose File" button and file name will be hidden using CSS in actual project. Hence, I have binded file name and delete icon in HTML separately.

once selected, how do you remove file, since in your plunker i cannot find the option to delete? — mbeso
– mbeso, Commented Mar 9, 2017 at 13:13

Sajal · Accepted Answer · 2017-03-09 13:28:36Z

1

When you remove the image, clear it from <input type="file"> such as:

$scope.removeImage = function(){
  document.getElementById("control").value = "";  <-- Add this line
  $timeout(function(){
     $scope.data.image = undefined;
  }, 100);
};

Associate Id to <input type="file">:

<input type="file" class="upload" file-model-no-preview="data.image" id="control"/>

answered Mar 9, 2017 at 13:28

Sajal

4,4111 gold badge22 silver badges41 bronze badges

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

1 Comment

Aosis Over a year ago

I was also doing the same thing but somehow I was not able to pick value fromm DOM. Thanks anyways.

Collectives™ on Stack Overflow

File Upload reset in AngularJS

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related