ASP.NET Upload Frequently Asked Questions

Complete FAQ for file uploading with ASP.NET 1.x-3.5

Clear HTML File Input

Share this page with friends, or bookmark it for yourself:

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 ASP.NET Upload Component

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