Clearing an <input type=file>

Question

I'm writing an HTA and want the user to be able to easily be able to select a .txt file using a browser. This .txt file will be read line by line and read into an array. So, I'm using the <input type=file name="ListFile">, which gives me the browse function, and does what I need it to...

But I need to be able to clear the text box for the <input type=file name="ListFile"> when user selects another method, I have setup, to input the data.

The reason I need it to clear is to prevent user error/mistakes. I currently have it setup to clear the manual entry text box when they use the browse option, but can't get it to work the other way around.

I have tried the following (which works on the regular text boxes)

Document.getElementByID("ListFile").value = ""
Document.getElementByID("ListFile").reset()
Docuemnt.getElementByID("ListFile").innerHTMl = ""
ListFile.Value = ""

None of these clear the text box.

Answer 1

For security reasons, you aren't able to modify the selected file in a file input field.

There is a workaround to reset it - you can clone the file input, and replace the input with the cloned input. It may be easier in your situation to just show / hide the inputs based on the user's selection.

For example, you can have a set of radio buttons for the user to select the input method - then show the appropriate field depending on what radio button they select.

If you absolutely must reset the file input, you can either use jQuery's .clone() method, or manually create a new dom element, copy over all properties, insert it after the original file input, then remove the original.

Answer 2

Thanks Sam Dufel... you gave me an idea.

Created a span that creates the on Window_onLoad

Span Code:

Window_onLoad Code: BrowseFile.innerHTML = " "

I then Copy this to another Sub that runs when they select the manual data entry option. Basically clearing the span and recreating the input.

Answer 3

You can't change the value of a file input type, as that would introduce a security vulnerability. Instead, just replace the file input with a new one. Instead of $('#file').val(''), do this:

 $('#file').replaceWith('<input name="ListFile" type="file" id="file"/>');

Even better would be to clone a copy of the original version and store it in memory. When you need to replace it, just used the cloned copy, and again clone it. So, something like this:

$(document).ready(function() {
    var empty_input = $('#file').clone();

    $('#the-form').on('change', '#file', function(el) {
        $('#the-form').submit(); // assuming the target is a hidden iframe
        $(this).replaceWith(empty_input.clone());
    });
})

Note that I'm using the delegated version with jQuery.on() so the event will still work on the new input right after it's replaced.