How can I clear an HTML file input with JavaScript?

All-encompassing methods to reset file input

How to clear file input while keeping form inputs intact

If you're looking to clear the file input without disturbing other input fields in the form, replace the existing input with a new one - kind of like swapping out bad eggs from your basket:

let fileInput = document.getElementById('yourFileInputId');
let newInput = document.createElement('input');
newInput.type = 'file'; // Fresh and new, straight out of the oven
fileInput.parentNode.replaceChild(newInput, fileInput);


Preserving event listeners and properties

When your swapfest begins, you might want to keep the event listeners and JavaScript land properties. In this case, instead of birthing a new input, clone the original while nullifying its value:

let fileInput = document.getElementById('yourFileInputId');
let newInput = fileInput.cloneNode(); // A clone, but with no secrets
newInput.value = '';
fileInput.parentNode.replaceChild(newInput, fileInput);


Navigating unpredictable browser behaviors

Browsers can be as unpredictable as that plot twist in your favorite thriller series. Use a try-catch block to handle these plot twists gracefully:

try {
    fileInput.value = ''; // Standard wipe for modern browsers
    if (fileInput.value) throw new Error('Walked into a wall. Clearing file input failed.');
} catch (e) {
    let newInput = fileInput.cloneNode(); // Fall back to the stunt double
    fileInput.parentNode.replaceChild(newInput, fileInput);
}


Additional considerations and alternative approaches

Clearing file inputs with AJAX, minus the form reset

When you want to wipe clean the input without a page reload or form reset, use an AJAX call:

let fileInput = document.getElementById('yourFileInputId');
let formData = new FormData();
formData.append('file', fileInput.files[0]);

// Perform an AJAX call (Example with Fetch API)
fetch('your-server-endpoint', {
    method: 'POST',
    body: formData,
}).then(() => {
    fileInput.value = ''; // After successful AJAX, discard the evidence
}).catch((error) => {
    console.error('Error:', error);
});


For fans of Internet Explorer 11 and older versions

For IE11 and the golden oldies, make sure the method you pick doesn't get lost in the past. The 'replace' method generally has got your back.

If you're on Team jQuery

For folks rocking jQuery, leveraging the wrap/reset/unwrap technique might tickle your fancy:

$('#yourFileInputId').wrap('<form>').closest('form').get(0).reset();
$('#yourFileInputId').unwrap(); // It's like unwrapping a present, but less fun.


Testing is key

Don't forget to test your solution to ensure it works as smoothly as that first sip of morning coffee across various environments. Also, remember that JavaScript can sometimes be a little too overprotective when it comes to file input manipulation.