How to access files in React

Question

So in HTML I can do something this:

<input type="file" id="upload" accept="text" multiple/>

Then I can access the files uploaded in JavaScript like this whenever the input changes:

document.getElementById('upload').onchange = function(){
  const uFiles = this.files;
  console.log(uFiles);
}

How would I go about doing that with ReactJS? So far, I've tried using the same approach I would use for HTML and JavaScript but I get the response that uFiles is undefined rather than a FileList object.

In my React Render:

<input onChange={this.doFunc} id="upload" type="file" accept="text" multiple />

In my React class:

doFunc = () => {

  const uFiles = this.files;
  console.log(uFiles);

}

Kasabucki Alexandr · Accepted Answer · 2019-11-17 07:15:40Z

1

I think you have to use event.

   doFunc = e => {

      const uFiles = e.target.files;
      console.log(uFiles);

    }

answered Nov 17, 2019 at 7:15

Kasabucki Alexandr

6303 silver badges6 bronze badges

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

Comments

carrow · Accepted Answer · 2019-11-17 07:44:54Z

0

function handleUploadChange(e)
{
    const file = e.target.files[0];
    if ( !file )
    {
        return;
    }
    const reader = new FileReader();
    reader.readAsBinaryString(file);

    reader.onload = () => {
        console.log(reader.result);
        console.log(file.type);
    };

    reader.onerror = function () {
        console.log("error on load image");
    };
}

answered Nov 17, 2019 at 7:44

carrow

13 bronze badges

1 Comment

help-info.de Over a year ago

May I request you to please add some more context around your answer. Code-only answers are difficult to understand. It will help the asker and future readers both if you can add more information in your post. See also Explaining entirely code-based answers.

Collectives™ on Stack Overflow

How to access files in React

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related