CODEWITHSUNDEEP
reactjs
bafix2203
bafix2203

Reputation: 541

Set file to State ReactJS

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!

Upvotes: 0

Views: 6240

Answers (1)

Sunil Kumar
Sunil Kumar

Reputation: 420

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>

Upvotes: 1

Related Questions