React: input onChange won't fire for the second time, first time it's work

Question

Recently I write my React JS app to import images from outside and process that image. In order to handle the user onChange event, I use onChange to run my function handleChange, but it won't work for the second time. How can I handle the onChange event properly? Here is my code

 <div className={classes.fileUpload}> <div style={{ position: "relative", display: "inline-block", height: "100%", width: "100%", }} > <input type={"file"} id="file" accept={"image/png, image/jpeg"} style={{ display: "none" }} onChange={(e) => handleChange(e.target.files)} /> <label htmlFor="file" className={classes.labelFile}> <PublishIcon style={{ marginRight: "10px" }} /> Upload file </label> </div> </div>

Are you choosing the same file the second time?

ray
– ray

2020-07-28 04:43:35 +00:00
Commented Jul 28, 2020 at 4:43 — ray
– ray, Commented Jul 28, 2020 at 4:43
have u tried onInput?

Asutosh
– Asutosh

2020-07-28 04:44:07 +00:00
Commented Jul 28, 2020 at 4:44 — Asutosh
– Asutosh, Commented Jul 28, 2020 at 4:44
Thank you, onInput its work <3 Thank you

NgxBa
– NgxBa

2020-07-28 04:53:49 +00:00
Commented Jul 28, 2020 at 4:53 — NgxBa
– NgxBa, Commented Jul 28, 2020 at 4:53

Mustakim · Accepted Answer · 2020-07-28 04:57:10Z

try this one

import React from 'react' class SimpleReactFileUpload extends React.Component { constructor(props) { super(props); this.state ={ file:null } this.onChange = this.onChange.bind(this) } onChange(e) { this.setState({file:e.target.files[0]}) } render() { return ( <form onSubmit={this.onFormSubmit}> <h1>File Upload</h1> <input type="file" onChange={this.onChange} /> </form> ) } } export default SimpleReactFileUpload

hope it will work!

that kind of complicated way to do this. I tried onInput and its work, thank you btw

Collectives™ on Stack Overflow

React: input onChange won't fire for the second time, first time it's work

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related