Having Issue on Getting Uploaded File Name by jQuery

Question

Can you please take a look at this demo and let me know why I am not able to get the name of the file(image)

 $('input:file').on('change', function(){ console.log($(this).prop("files")['name']); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" name="file" id="test" /> 

As you can see I am getting undefined in console.

Answer 1

$(this).prop("files") returns a FileList , not a single file.

You'd need to do:

$(this).prop("files")[0]['name']

See: https://developer.mozilla.org/en-US/docs/Web/API/FileList