React: Open (.json) file via dialog and read content

Question

I can't seem to figure out how to load a local .json file and read the content - so I can dump it into some ´state´.

The code looks like this so far:

import React, { Component } from 'react'
import Files from 'react-files'

class LoadFile extends Component {
  render() {
    return (
      <div className="files">
        <Files
          className="files-dropzone"
          onChange={file => {
            console.log(file)
          }}
          onError={err => console.log(err)}
          accepts={['.json']}
          multiple
          maxFiles={3}
          maxFileSize={10000000}
          minFileSize={0}
          clickable
        >
          Drop files here or click to upload
        </Files>
      </div>
    )
  }
}

export default LoadFile

The logged object does not have any of the data buried inside of it..

[Object]
  0: Object
    id: "files-1"
    extension: "json"
    sizeReadable: "288B"
    preview: Object
      type: "file"

Carr · Accepted Answer · 2018-04-12 09:23:16Z

7

Like @dkniffin said, what behind react-files is DataTransfer.

You could utilize the FileReader API to get the file content and parse it in JSON format, you could see the result in the console section of CodeSandbox below:

constructor() {
  super();
  this.state = {
    jsonFile: {}
  };

  this.fileReader = new FileReader();

  this.fileReader.onload = (event) => {

    // or do whatever manipulation you want on JSON.parse(event.target.result) here.

    this.setState({ jsonFile: JSON.parse(event.target.result) }, () => {
      console.log(this.state.jsonFile);
    });
  };

}

...

render() {

    return (
       <div className="files">
         <Files

          ...

          onChange={file => {
              // we choose readAsText() to load our file, and onload
              // event we rigister in this.fileReader would be triggered.
              this.fileReader.readAsText(file[0]);
          }}
         >
           Drop files here or click to upload
         </Files>
       </div>
    );
}

edited Apr 12, 2018 at 9:23

answered Apr 11, 2018 at 15:03

Carr

2,8012 gold badges22 silver badges28 bronze badges

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

1 Comment

Norfeldt Over a year ago

Thank you so much!! I actually had a try with fileReader, but I see that my semantic was wrong.

dkniffin · Accepted Answer · 2018-04-11 13:56:30Z

0

Unfortunately, I don't have a complete answer for you. However, after digging into the source code of react-files for a bit, I found this line:

let filesAdded = event.dataTransfer ? event.dataTransfer.files : event.target.files

It appears that filesAdded will be a FileList, which is basically just an array of File objects. Unfortunately, I don't see a way to get the content from a File object. Maybe someone else can help out with that.

answered Apr 11, 2018 at 13:56

dkniffin

1,4011 gold badge17 silver badges26 bronze badges

Collectives™ on Stack Overflow

React: Open (.json) file via dialog and read content

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related