How can I clear an HTML file input with JavaScript?

Admin 1
Viewed 330765

I want to clear the file input in my form.

I know about setting the sources to the same method... But that method wont erase the selected file path.

Note: I would like to avoid having to reload the page, reset the form or perform an AJAX call.

Is this possible?

input-type-file html javascript
19 Answers

the input.value = null is a working method, however it will only trigger input's change event if called from an onclick event.

Solution to that would be calling that onchange handler manually whenever you need to reset the input.

function reset_input(input) {
    $(input)[0].value = null;
    input_change_handler();
}
function input_change_handler() {
    // this happens when there's been a change in file selection

    if ($(input)[0].files.length) {
        // file(s) selected
    } else {
        // nothing is selected
    }
}
$(input).on('change', input_change_handler);
user_22418930

That's actually quite easy.

document.querySelector('#input-field').value = '';
user_20671080

Here are my two cents, the input files are stored as array so here is how to null it

document.getElementById('selector').value = []

this return an empty array and works on all browsers

user_134203390

I was having same problem and i came up with this. 

var file = document.querySelector('input');
var emptyFile = document.createElement('input');
emptyFile.type = 'file';

document.querySelector('button').onclick = function(){
  file.files = emptyFile.files;
}
<input type='file'>
<button>clear</button>

user_99214640

This worked for me.

const clear = (event) =>{event.target.value = [ ];}
clear("input_id");
user_135470080

Try this easy and it works

let input = elem.querySelector('input[type="file"]');
input.outerHTML=input.outerHTML;

this will reset the input

user_105250350

An - in my world easy an clean solution - is, to set the file inputs files to a clear FileList.

EDIT: as SteJ told - this ist not working with Safari.

Since we can not create a FileList directly - I user DataTransfer as "hack"

@$input[0].files=new DataTransfer().files

or

file_input_node.files=new DataTransfer().files
user_25928080

I changed to type text and back to type to file using setAttribute

'<input file-model="thefilePic" style="width:95%;" type="file" name="file" id="filepicture" accept="image/jpeg" />'

'var input=document.querySelector('#filepicture');'

if(input != null)
{
    input.setAttribute("type", "text");
    input.setAttribute("type", "file");
}
user_55286310

I tried most of solutions but did not seem anyone to work. However I found a walk around for it below.

The structure of the form is: form => label, input and submit button. After we choose a file, the filename will be shown by the label by doing so manually in JavaScript.

So my strategy is: initially the submit button is disabled, after a file is chosen, the submit button disabled attribute will be removed such that I can submit file. After I submit, I clear the label which makes it look like I clear the file input but actually not. Then I will disable the submit button again to prevent from submitting the form.

By setting the submit button disable or not, I stop the file from submitted many times unless I choose another file.

user_76439070
Related