在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.

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