How do I refresh my input file tag's selected file?

Question

Currently, I have an input type="file" which allows me to select a file mainly to upload images as shown below

<input type="file" accept="image/*" capture="camera" id="file-upload">

It looks like this in the views

I click on the choose file button and select a file

and then the input tag/button turns to.

I want to create a function that when I call it, it will refresh just the input tag/function back to "No file chosen" without location.reloading() the entire page. So back to:

I've tried to create a jQuery event that simulates a click of the input file button and then simulates a esc keypress

var esc = $.Event("keydown", { keyCode: 27 });
$( "#file-upload" ).click();
$( "#file-upload" ).trigger(esc);

However, due to security issues browsers do not support this ability. I also tried replacing the HTML itself by

document.getElementById("refreshInput").innerHTML = "<input type='file' accept='image/*' capture='camera' id='file-upload'>";

This also is not what I am looking for. Any feedback is much appreciated.

Answer 1

(This question was answered in a comment long ago, so I'm copying that comment to a proper answer for the record.)

$( "#file-upload" ).val("") – dandavis Aug 22 '14 at 22:32