console.log() locally uploaded csv file

Question

This is a file upload handler I have in my code.

onFileUpload() {
    const file = document.querySelector('input[type=file]').files[0];

    const reader = new FileReader();    
    console.log('contents of file:', reader.readAsText(file));

    this.props.getFile(file); // an action
  }

This code snippet logs undefined to the console. What does it lack?

UPDATE 1. The render() method in the React component. The onFileUpload() method was binded in the constructor with this.onFileUpload = this.onFileUpload.bind(this).

render() {
    return (
      <div>
        ...
        <input type='file' id='files' className='file-input-hidden' onChange={this.onFileUpload} />
      </div>
    );
  }

It is an asynchronous method. I see no event listeners added for when the Filereader is complete.... — epascarello, Feb 08 '19 at 18:08
Look at the documentation example on MDN https://developer.mozilla.org/en-US/docs/Web/API/FileReader/onload — epascarello, Feb 08 '19 at 18:10

Dhananjai Pai · Accepted Answer · 2019-02-08T18:32:31.357

2

onFileUpload() {
    const file = document.querySelector('input[type=file]').files[0];

    const reader = new FileReader()
    reader.onload = event => console.log(event.target.result)
    reader.onerror = error => throw(error)
    reader.readAsText(file)

    this.props.getFile(file); // an action
  }

You just have to add a listener to do the logging rather than doing it synchronously

edited Feb 08 '19 at 18:32

answered Feb 08 '19 at 18:17

Dhananjai Pai

5,914
1
10
25

As it stands now `reject(error)` would return an error `reject is undefined`. – El Anonimo Feb 08 '19 at 18:32
@ElAnonimo updated with throw. Pardon the mistake – Dhananjai Pai Feb 08 '19 at 18:32
1

I deleted the comment you responded to cause the issue was with me having two `reader.onload()` calls in `onFileUpload()`. I had it like this: https://pastebin.com/XfF1m764 – El Anonimo Feb 08 '19 at 18:47

console.log() locally uploaded csv file

1 Answers1