Load a local Json file and store it in a variable using Javascript

Question

I created a small app that saves me data in a JSON file! Since it's all local I don't need node.js and backend technologies. After a series of functions, a JSON file is saved locally with Blob.

How do I create an event that will import this file by choosing it from the filesystem of the computer?

If I write at the top of the listing import data from './data.json'; it works! I'd rather rather have the option of being able to upload the file from anywhere on the filesystem.

this allows me to save the file where I want:

 let file = new Blob([fileJSON], {type: 'application/json'});
     let a = document.createElement("a");
     a.href = URL.createObjectURL(file);
     a.download = file;
     a.click();

how do I load it by going to choose the path every time?

loadDatas=()=>{
  const dataJ = //something that allows me to go and choose the json file from my computer wherever it is

const parseIt = $.parseJSON(dataJ);
    // do something
}

https://stackoverflow.com/questions/3582671/how-to-open-a-local-disk-file-with-javascript — Kuo-hsuan Hsu, Mar 28 '20 at 08:39
so you want to use a open file dialog? for the user to pick a filepath? — Bobbey, Mar 28 '20 at 08:39
did you try the tag? you did not add any markup code to your question... — Bobbey, Mar 28 '20 at 08:55
Please check https://stackoverflow.com/questions/46119987/upload-and-read-a-file-in-react — xdeepakv, Mar 28 '20 at 09:02
Does this answer your question? [Upload and read a file in react](https://stackoverflow.com/questions/46119987/upload-and-read-a-file-in-react) — xdeepakv, Mar 28 '20 at 09:03

Kuo-hsuan Hsu · Accepted Answer · 2020-03-28T09:01:52.450

You could try codes below:

constructor(props){
    super(props)
    this.state={
         file:null
    }
    this.inputRef = React.createRef()
}

openFileLoadingDialog = () => {
    this.inputRef.current.click()
}

readURL=(e)=>{
    let file = URL.createObjectURL(e.target.files[0])
    if(this.state.file !== file)
    {
        this.setState({
            file : file
        })
    }
}

render(){

     return(
         <div>
             <input type="file" style={{display:"none"}} ref={this.inputRef} onChange={this.readURL}/>
             <input type="button" value="open file" onClick={this.openFileLoadingDialog} />
         </div>
     )
}

Load a local Json file and store it in a variable using Javascript

1 Answers1