get files form input file before submit

Question

I'm trying to get the file to upload of an input file and is undefined

$('#extra-submit').on('click',function(e){
    var file = $('#extra-file');
    console.log(file.files);
});

ans this is the html ,the input file it's not inside a form

<div>
            <div class="col-md-12"> 
                <input type="file" name="extra-file" id="extra-file">
            </div>
            <div class="col-md-12 text-center"> 
                <button type="button" id="extra-submit" class="btn btn-default">Afegir</button>
            </div>
        </div>

Answer 1

file is a jQuery object that does not have a files property. That property is on the underlying DOM element, so you need to use file[0].files:

$('#extra-submit').on('click', function(e) {
  var file = $('#extra-file');
  console.log(file[0].files); // note the [0] here
});