e.dataTransfer.files[0] is undefined / Drag and Drop / React

Hi everyone!
I am newbie and I’ve been trying to solve this by google it but I am not able to find the way to make it work…
I am trying to get the information from the file I drag and drop.

When I console log e.dataTransfer this is the object:

Screen Shot 2020-10-01 at 11.32.39 AM

When I console.log(e.dataTransfer.files) this is the result on the console :

  1. FileList {length: 0}
  2. length: 0

However when I try to get into e.dataTransfer.files[0] it would be empty and give ‘undefined’.

Please let me know if i am missing information here.
I really do not know how I can get this information from files…

Thank you in advance :slight_smile:

Hey Laura,

nice to meet you! :slightly_smiling_face:

It would be awesome to see a (working) example of your project on codesandbox, so that we can fiddle around with it.


Your files is a FileList. It has 0 elements.
What do you expect the first element of an empty FileList to be (e.dataTransfer.files[0])?

1 Like

Hi miku, sorry about my late reply!