react show image onload code example

Example 1: multiple image upload react

class ImageUpload extends React.Component {
  state = {
    files: []
  }

  fileSelectedHandler = (e) => {
    this.setState({ files: [...this.state.files, ...e.target.files] })
  }

  render() {
    return (
      <form>
        <div><h2>Upload images</h2></div>
        <h3>Images</h3>
        <input type="file" multiple onChange={this.fileSelectedHandler} />
      </form>
    )
  }
}


ReactDOM.render(<ImageUpload />, document.getElementById('app'))

Example 2: react image upload

/* Answer to: "react image upload" */

/*
  "react-images-upload" is a simple component for upload and
  validate (client side) images with preview built with React.js.
  This package use "react-flip-move [1]" for animate the file preview
  images.
  
  Download it here:
  https://www.npmjs.com/package/react-images-upload
  
  or if you need help or don't want to use packages,
  you can watch this video:
  https://www.youtube.com/watch?v=XeiOnkEI7XI

  [1] Link to "react-flip-move", mentioned in the 
  "react-images-upload" summary:
  https://github.com/joshwcomeau/react-flip-move
*/

Tags:

Html Example