0

I have created a small functionality in react, wherein I am able to upload a file successfully and save it inside a state. I am trying to parse the file contents using the "fs-extra" npm library and print it on a console. But, I am not able to do it successfully. Below is the code:

import * as fs from "fs-extra";
import axios from "axios";
export default class FileUpload extends React.Component<{}, { selectedFile: any, loaded: number }> {

constructor(props: any) {
    super(props);
    this.state = {
        selectedFile: null,
        loaded: 0
    }
}

changeHandler = (event: any) => {
    event.preventDefault();
    this.setState({
        selectedFile: event.target.files,
        loaded: 0
    })
}

clickHandler = async (event: any) => {
    event.preventDefault();
    const data = new FormData();
    for (let x = 0; x < this.state.selectedFile.length; x++) {
        console.log(fs.readFileSync(this.state.selectedFile[x], "utf-8"))
        data.append('file', this.state.selectedFile[x])
    }
    axios.post("http://localhost:8080/test", data, {

    }).then(res => {
        console.log(res.statusText)
    });
}
render() {
    return (
        <div className="container-fluid bg-secondary">
            <div className="row">
                <div className="col-md-6">
                    <form>
                        <div className="form-group">
                            <label htmlFor="exampleFormControlFile1">Example file input</label>
                            <input
                                multiple
                                onChange={this.changeHandler}
                                type="file"
                                className="form-control-file"
                                id="exampleFormControlFile1" />
                            <button
                                type="button"
                                className="btn btn-success btn-block"
                                onClick={this.clickHandler}
                            >Upload</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    );
}
}

I get the following error:

TypeError: Cannot read property 'native' of undefined

What is the problem with this code? Also, how can I achieve the goal that I want to achieve?

Aishwary Shukla
  • 450
  • 1
  • 7
  • 21
  • You can't use `fs-extra` on the front end, it's a Node only module. FS stands for file system, it lets Node do file system stuff, which the browser isn't allowed to do (cos you don't want websites being able to see your interact with your computer's files) – Jayce444 Nov 05 '20 at 03:27
  • If I write a separate file that contains this functionality, will that work? Or will I need to use a different approach altogether? – Aishwary Shukla Nov 05 '20 at 03:32
  • You need to either use a bundler to resolve the data file at build time, and inline it - or else serve it over HTTP and get it into your program via a REST request from the server. – Josh Wulf Nov 05 '20 at 03:40
  • Looking at your loop, you probably want to put the files on the server, and then pull them via REST GET and put them into memory in a constructor / bootstrap init of your app. – Josh Wulf Nov 05 '20 at 03:42

0 Answers0