Clearing <input type='file' /> using jQuery

Advanced Strategies for Clearing File Inputs

Form reset method for file input clearance

By wrapping your file input within a form element and resetting the form itself, you can achieve a clear input field:

// Moves more swiftly than a ninja in the night
$('<form>').append($('#fileInput').clone()).trigger('reset').children().first().unwrap();


This method perfectly meets these requirements:

• Retains the attributes and data of the original input.
• Keeps your sweat away, by not needing to rebind event handlers.
• Universally accepted, like a credit card, works across numerous browsers, from IE6 to the latest ones.

Keeping form events cool as a cucumber

While clearing the input, if you tend to stop any parent forms from submitting use .preventDefault():

// Being a gatekeeper, stopping form submission
$('form').on('submit', function(e) {
    e.preventDefault();
    //... file input clearing code ...
});


Addressing the elephant in the room: IE Specific Behavior

Even if you don't get it right always (Expressions like, "But it works on my machine"), Internet Explorer 11** tends to be a different species. File text gets cleared as expected, but the file list might stick around like Michelangelo's paintings on the Sistine Chapel's ceiling.

Use this form reset method or input cloning and replacing for IE:

// Good ol' IE always keeps you on your toes, eh?
if (navigator.userAgent.match(/Trident\/7\./)) { // IE11 detection
    $("#fileInput").replaceWith($("#fileInput").clone(true));
}


Cloning, Events, and Their Shenanigans

Clone Wars: Cloning file input with events

Using .clone(true) makes sure that the event handlers resemble a determined octopus, firmly attached all the time.

var original = $('#fileInput');
var clone = original.clone(true);
original.replaceWith(clone);


Events behaving odd? Use event delegation

If you're in a situation where .clone(true) doesn't carry over certain events, consider moving your event listeners to a parent element, using the "delegation" method:

// Pro Tip: Delegate your events, like a good manager.
$('#parentElement').on('event', '#fileInput', function() {
    // Event handler code here
});


Event delegation is especially useful when you're cloning and attaching elements with dynamically generated content, keeping the chivvy of events under control.

Tips, Tricks, and Caveats of Clearing File Inputs

JavaScript Security Restrictions: Do Not Marginalize

Directly altering file input's value is considered a no-no due to security reasons. So, the user must be the one selecting files; however, you can clear it using our aforementioned methods.

Vanilla JS Way of Cloning and Replacing

A bit of a purist? If you're not using jQuery or just prefer a cleansing Vanilla JS solution, here is how to get the same result using cloneNode(true):

// Going ol' school with good ol' javascript
var fileInput = document.getElementById('fileInput');
var clone = fileInput.cloneNode(true);
fileInput.parentNode.replaceChild(clone, fileInput);


Browser Support: Know thy audience

Remember, browser support can vary. So, do your homework and test your solution across several browsers you need to support.

Visualization

Think of clearing the <input type='file' /> like hitting the reset button on your electronic device:

Before: [🎮📁 Files Selected] After the clear operation: [🎮🔄No Files—please select]

To get started again, reset:

$('input[type="file"]').val(''); // Like you've hit: [Start Over]


🎮🔄 The choice is yours: [Pick New Files]

The choice is like deciding on cinema snacks: [Marvel Film↪Caramel Popcorn, Indie Film↪Artisanal Cheese Board]

Resetting due to Specific Requirements

Sometimes fully wrapping inputs within a form and resetting could be impractical when the form contains multiple inputs or contains data that needs to stick around like sticky notes. Always consider the peculiar data requirements of your application.

Manual Rebinding of Events

Sporadically, during the process of cloning, a gremlin might eat some of your events away. If that happens, you have to manually re-bind your event handlers:

// "I've got you covered!" - this code, probably.
var original = $('#fileInput');
var clone = original.clone().on('change', original.data('events').change[0].handler);
original.replaceWith(clone);


Say No to Deprecated Features

Just like Green Day sang, "Wake me up when September ends" and you should be like, "Wake me up when deprecated features end". Stay clear of deprecated jQuery features like $.browser; scout for feature detection libraries, resort to navigator.userAgent, only when absolutely needed.