How to get file name from input file with jquery

Question

I'm trying to get name from current uploaded file, I'm sure I'm pretty close, but can't reach exact name. When I'm using this:

$('.technicalDraw').on('change', '#file-upload', function () {
  console.log($(this.files))
})

I get this output:

but when I'm trying something like this:

$('.technicalDraw').on('change', '#file-upload', function () {
  console.log($(this.files.name))
})

I recive this:

How can I reach filename.pdf?

Cheers

@CarstenLøvboAndersen doesn't work - shows me this: jQuery.fn.init [prevObject: jQuery.fn.init(1)], and it's without any connection with my uploaded file — Paweł
– Paweł, Commented Jan 19, 2021 at 8:08
Just this.files[0] not $(this.files[0]) - if you're getting jquery.fn.init then you've used $() somewhere — fdomn-m
– fdomn-m, Commented Jan 19, 2021 at 8:49

Carsten Løvbo Andersen · Accepted Answer · 2021-01-19 08:11:25Z

2

You can do it like this if there is only 1 file:

$(this)[0].files[0].name

or

this.files[0].name

If there is multiple files I would look thought each file to display the name.

Demo

$(document).on('change', '#file-upload', function () {
  console.log(this.files[0].name)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="file-upload" type="file" />

answered Jan 19, 2021 at 8:11

27.1k10 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1