How do I - Unselect a file for upload

Get Started
1

I click on “Browse” or “Choose” button in a file field.
And select a file.

Unfortunately, I decided not to send any of the files via the upload form.
How should I remove the selected file in the form, without reloading the page?

2

The only way you can reset a file input field is by either doing one of the following:

  1. Use JavaScript to recreate the element and remove the old one
  2. Use JavaScript to reset the form (not recommended but it works)
  3. Use the input type “reset” which is standard in HTML and is the easiest to implement, the only major downside is it will clear your entire form
3

Hi,
You can add the form field with a button to remove it, like this:

<div><input type="file" name="a_name" /> <span style="cursor:pointer;color:red;" onclick="this.parentNode.innerHTML=''">X</span></div>
4

Thanks MarPlo.
Here is my solution with a little modification that prevented multiple cancel options.


<!-- file replacement via upload -->
<span id="answer_image-upload">
	<input type="file" name="answer_image" value="" class="file" id="answer_image-file" />
</span>
<span class="form-hints">
	Or, upload a file now |
	<a href="#" onclick="return !(document.getElementById('answer_image-upload').innerHTML=document.getElementById('answer_image-upload').innerHTML);">Cancel upload</a>
</span>