How to access the name property of an uploaded file (javascript)

Question

I've gone through other similar threads and am not finding my answer, if I missed it, apologies for the duplicate.

I have a simple event handler for file submission with a form. It is as so:

onChange(e) {
    let files = e.target.files;
    console.log(files);
  }

The console log is:

FileList {0: File(692), length: 1}
0: File(692)
lastModified: 1546326376754
lastModifiedDate: Tue Jan 01 2019 00:06:16 GMT-0700 (Mountain Standard Time) {}
name: "userFile.txt"
size: 692
type: "text/plain"
webkitRelativePath: ""
__proto__: File
length: 1
__proto__: FileList

I would like to console.log(files.name) and get userFile.txt returned. I am getting undefined. Very sorry if this has been answered a million times, I've spent a long time searching and trying different dot notations etc. to no avail. Thanks

FileList {0: File(692), length: 1}, it's an array of size 1, does that tell you what to do? — EugenSunic
– EugenSunic, Commented Jan 6, 2019 at 3:36
Possible duplicate of get the filename of a fileupload in a document through javascript — EugenSunic
– EugenSunic, Commented Jan 6, 2019 at 3:37

brk · Accepted Answer · 2019-01-06 03:33:12Z

3

You can get it by files[0].name

function getFileName(e) {

  let files = e.target.files;
  console.log(files[0].name);
}

<input type='file' onchange='getFileName(event)'>

answered Jan 6, 2019 at 3:33

brk

50.3k10 gold badges59 silver badges85 bronze badges

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

1 Comment

Hanley Soilsmith Over a year ago

lovely, will accept when in a few minutes when the site lets me. Thanks!

Jack Bashford · Accepted Answer · 2019-01-06 03:40:15Z

1

I believe you need to access the 0 property in files like so:

console.log(files[0].name);

And it should work.

Demonstration:

function getFileName(event) {

  const files = event.target.files;
  console.log(files[0].name);
}

<input type='file' oninput='getFileName(e)'>

edited Jan 6, 2019 at 3:40

answered Jan 6, 2019 at 3:32

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

1 Comment

Jack Bashford Over a year ago

No problem @HanleySoilsmith, glad I could help!

Collectives™ on Stack Overflow

How to access the name property of an uploaded file (javascript)

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related