Removing/Clearing all selected files via the File Input button

Question

I'm using the input element in HTML with the file type option, IE: <input type="file" /> with the option of allowing multiple files to be selected.

However, I'm wondering if there's a way to remove or clear all of the files that the user selected via the file type button though a click of a button.

Basically, here is what I have so far:

<input type="file" multiple="multiple" />
<input type="button" value="Clear all attachments" onclick="" />

I have no idea how to implement that second button.

take a look here http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery — Alexander.It, Jul 06 '15 at 17:32

haffla · Accepted Answer · 2015-07-07T19:52:10.370

3

There is a trick: Redraw the HTML block! Source

<div id="container">
   <input type="file" multiple="multiple" />
   <input type="button" value="Clear all attachments" onclick="clearSelection();" />
</div>

//Javascript
function clearSelection() {
    document.getElementById("container").innerHTML = document.getElementById("container").innerHTML;
}

edited Jul 07 '15 at 19:52

answered Jul 06 '15 at 17:40

haffla

1,056
8
15

Shouldn't the id in the getElementById function be the id of the file input button? – LOL. NO. Jul 06 '15 at 21:35
Sorry. You need to surround with a container and redraw that. I updated my answer. – haffla Jul 07 '15 at 19:52
Got it. Looks like it's working like a charm too. Thank you! – LOL. NO. Jul 07 '15 at 19:55

Removing/Clearing all selected files via the File Input button

1 Answers1