Set file to State ReactJS

Question

In my react component I have :

 state = { title: '', content: '', file: '' } handleChange = (e) => { this.setState({ [e.target.id] : e.target.value }) } handleSubmit = (e) => { e.preventDefault(); console.log(this.state) } <form onSubmit={this.handleSubmit}> <input type="text" id="title" onChange={this.handleChange}/> <textarea id="content" onChange={this.handleChange}></textarea> <input type="file" id="file" onChange={this.handleChange}/> </form>

and i am getting in console.log(this.state) only path to file, like : "C:\fakepath\title.jpg". How to set to state actual file? Thanks for help in advance!

do you mean display the selected file?

Eugeni Bejan
– Eugeni Bejan

2018-11-26 17:16:59 +00:00
Commented Nov 26, 2018 at 17:16 — Eugeni Bejan
– Eugeni Bejan, Commented Nov 26, 2018 at 17:16

Sunil Kumar · Accepted Answer · 2018-11-26 17:32:26Z

for read file from event you must be use e.target.files[0] bellow code works fine for you

state = { title: '', content: '', file: '' } handleChange = (e) => { this.setState({ [e.target.id] : e.target.value }) } handleOnFileChange = (e) => { let file = e.target.files[0]; this.setState({ [e.target.id] : file }) } handleSubmit = (e) => { e.preventDefault(); console.log(this.state) } <form onSubmit={this.handleSubmit}> <input type="text" id="title" onChange={this.handleOnFileChange}/> <textarea id="content" onChange={this.handleChange}></textarea> <input type="file" id="file" onChange={this.handleChange}/> </form>

Now how can I reassign this stored file to the input file tag, because when I changed the state the file automatically deselect?

Collectives™ on Stack Overflow

Set file to State ReactJS

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related