check if a file is loaded to

Question

Everything is in the title: how can I check if a file is loaded to <input type="file"> ?

<input type="file" id="document-file" />
<input type="submit" id="document-send" />


<script type="text/javascript">
    $('#document-send').click(function(event){
        event.preventDefault();

        var files = $("#document-file");
        console.log(files.length);
    }
</script>

files.length always returns me 1 even if no file is loaded.

See this: http://stackoverflow.com/a/5670938/3509874 – urbz Jul 29 '14 at 13:58 — urbz, Jul 29 '14 at 13:58

score 3 · Accepted Answer · answered Jul 29 '14 at 13:58

3

You can check the files property of the element, not the jQuery object:

var files = $("#document-file")[0].files;

answered Jul 29 '14 at 13:58

tymeJV

103,943
14
161
157

yeah! it works, but what is the element in the position `0` ? – Ghilas BELHADJ Jul 29 '14 at 14:05
The DOM element is at position `0` - it is essentially doing a `getElementById` – tymeJV Jul 29 '14 at 14:07

score 3 · Answer 2 · answered Jul 29 '14 at 14:03

3

You could just try to read if the input has a value:

if(document.getElementById("document-file").value != ""){
    // do stuff here
}

If it does, theres a file, if its empty there isn't. It's backwards compatible with browsers that don't support fileReaders.

answered Jul 29 '14 at 14:03

somethinghere

16,311
2
28
42

Best answer I found to use vanilla javascript to see if there is something loaded into the file input of a form. – raw-bin hood Feb 28 '19 at 18:22

score 1 · Answer 3 · answered Jul 29 '14 at 14:04

You want to check the .val() of the input, then check the .length of that value.

DEMO

Here is how I did it in fiddle.

$('button').click(function(){
    var files = $("#document-file").val();
    if(files.length > 0){
         $('body').append(files + '<br />');
    } else {
         $('body').append('No File <br />');
    }
});

I hope this helps!

check if a file is loaded to

3 Answers3

Linked