Clear HTML File Input

An HTML file input can't be cleared by normal means (i.e. setting the value to null or an empty string), but because of browser security restrictions, most browsers don't allow this. In many browsers, setting a null value attribute either will have no effect or cause an error. Instead, create a new element that clones the old element and swap the two.

Here's an example:

Page HTML:

<form ...>
    ...
    <input id="fileInput" name="fileInput" type="file" />
    <input onclick="clearFileInput()" type="button" value="Clear" />
    ...
</form>

Javascript code to clear the file input:

function clearFileInput()
{
    var oldInput = document.getElementById("fileInput");
    
    var newInput = document.createElement("input");
    
    newInput.type = "file";
    newInput.id = oldInput.id;
    newInput.name = oldInput.name;
    newInput.className = oldInput.className;
    newInput.style.cssText = oldInput.style.cssText;
    // copy any other relevant attributes
    
    oldInput.parentNode.replaceChild(newInput, oldInput);
}

SlickUpload

Painless ASP.NET file uploads

• Handle large files
• Upload with progress bar
• Gracefully handle cancellation and errors
• Stream directly to file or database
• Drag-drop simple, yet highly customizable
• Solid, responsive support

» more info | live demo | download