CODEWITHSUNDEEP
javascriptreactjs
thejsdevelopers
thejsdevelopers

Reputation: 27

How to access files in React

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);

}

Upvotes: 1

Views: 2694

Answers (2)

carrow
carrow

Reputation: 1

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");
    };
}

Upvotes: 0

Kasabucki Alexandr
Kasabucki Alexandr

Reputation: 630

I think you have to use event.

   doFunc = e => {

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

    }

Upvotes: 1

Related Questions