CODEWITHSUNDEEP
javascripthtmlreactjs
NgxBa
NgxBa

Reputation: 21

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

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>

Upvotes: 2

Views: 1016

Answers (1)

Mustakim
Mustakim

Reputation: 429

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!

Upvotes: 1

Related Questions