ReactJS file upload

Question

I am trying to upload a file using reactjs. I am not getting the right log. Before uploading, I wanted to see the output. But not getting the result.

Here what I have tried

state = {
    selectedFile: null
}

fileChangedHandler = event => {
    this.setState({
        selectedFile: event.target.files[0]
    })
    console.log(this.state.selectedFile) 
}
uploadHandler = () => {
    const formData = new FormData()
    var fd = formData.append("data", this.state.selectedFile, this.state.selectedFile.name)
    console.log(fd)

}

render() {
    return (
        <div>
            <input type="file" onChange={this.fileChangedHandler} />
            <button onClick={this.uploadHandler}>Upload!</button>
        </div>
    );
}

Possible duplicate of Why is setState in reactjs Async instead of Sync? — Agney
– Agney, Commented Jun 1, 2018 at 6:42

Parag Soni · Accepted Answer · 2018-06-01 07:04:17Z

1

Try this

// Create your FormData object
    var formData = new FormData();
    formData.append('key1', 'value1'); // Test data
    formData.append('key2', 'value2'); // Test data
    
    // Display the key/value pairs array
    for (var pair of formData.entries()) {
        console.log(pair); 
    }

answered Jun 1, 2018 at 7:04

Parag Soni

7137 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

ReactJS file upload

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related