clearing an HTML file upload field via JS

Question

i want to reset a file upload field when the user selects another option

is this possible via JS? i'm suspecting that the file upload element is treated differently b/c it interacts with the user's FS, and maybe it's immutable

basically, what i want is something like (pseudo)

// choose selecting existing file
$('#select-file').bind('focus', function() {
  // clear any files currently selected in #upload-file
  $('#upload-file').val(''); 
}) ;

// choose uploading new one - this works ok
$('#upload-file').bind('focus', function() {
  // clear any files currently selected in #select-file
  $('#select-file').val(''); 
}) ;

Answer 1

Yes, the upload element is protected from direct manipulation in different browsers. However, you could erase the element from the DOM tree and then insert a new one in its place via JavaScript. That would give you the same result.

Something along the lines of:

$('#container-element').html('<input id="upload-file" type="file"/>');

Answer 2

They don't get focus events, so you'll have to use a trick like this: only way to clear it is to clear the entire form

<script type="text/javascript">
    $(function() {
        $("#wrapper").bind("mouseover", function() {
            $("form").get(0).reset();
        });
    });
</script>

<form>
<div id="wrapper">
    <input type=file value="" />
</div>
</form>

Answer 3

You can't set the input value in most browsers, but what you can do is create a new element, copy the attributes from the old element, and swap the two. Here's an article that covers this with sample code: How to clear HTML file inputs

Answer 4

The code I ended up using was,

clearReviewFileSel: function() {
  var oldInput = document.getElementById('edit-file-upload-review-pdf') ;
  var newInput = document.createElement('input');
  newInput.id    = oldInput.id ;
  newInput.type  = oldInput.type ;
  newInput.name  = oldInput.name ;
  newInput.size  = oldInput.size ;
  newInput.class  = oldInput.class ;
  oldInput.parentNode.replaceChild(newInput, oldInput); 
}

Thanks everyone for the suggestions and pointers!