-1

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

Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
Hanley Soilsmith
  • 579
  • 2
  • 9
  • 27
  • FileList {0: File(692), length: 1}, it's an array of size 1, does that tell you what to do? – EugenSunic Jan 06 '19 at 03:36
  • Possible duplicate of [get the filename of a fileupload in a document through javascript](https://stackoverflow.com/questions/1804745/get-the-filename-of-a-fileupload-in-a-document-through-javascript) – EugenSunic Jan 06 '19 at 03:37

2 Answers2

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)'>
brk
  • 48,835
  • 10
  • 56
  • 78
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)'>
Jack Bashford
  • 43,180
  • 11
  • 50
  • 79