Answers for "preview image upload react"

8

show preview of input image javascript react

const React = require('react')
class Upload extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      file: null
    }
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(event) {
    this.setState({
      file: URL.createObjectURL(event.target.files[0])
    })
  }
  render() {
    return (
      <div>
        <input type="file" onChange={this.handleChange}/>
        <img src={this.state.file}/>
      </div>
    );
  }
}
module.exports = Upload
Posted by: Guest on May-27-2020
1

display preview of image upload react

//ReactJs

import {useState } from "react";

export default function Home() {
	 const [file,  setFile] = useState("")
     
     const handleChange = (e) =>{
       setFile(URL.createObjectURL(e.target.files[0]))
     }
     
     return (
         <div>
          <input type="file" onChange={handleChange}/>
          <img src={file}/>
        </div>
     )
	
}
Posted by: Guest on August-06-2021
1

display preview of image upload react

<!-- html + Javascript -->

//js
<script>
  const handleChange = (e) =>{
     const file = URL.createObjectURL(e.target.files[0])
     document.getElementById("preview-img").src = file;
  }
  document.getElementById("file-input").addEventListener("change", handleChange);
</script>
     

 //html
 <div>
  <input id="file-input" type="file"/>
  <img id="preview-img" src="" width="200"/>
</div>
Posted by: Guest on August-06-2021
0

preview image before upload reactjs

state = {
  img: logo
}

handleChangeImage = e => {
  this.setState({[e.target.name]: URL.createObjectURL(e.target.files[0])})
}

<input type="file" id="img" name="img" accept="image/*" className="w-100" onChange={this.handleChangeImage}/>

<img src={this.state.img} alt="img"/>
Posted by: Guest on September-02-2021
5

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
*/
Posted by: Guest on April-17-2020

Code answers related to "preview image upload react"

Code answers related to "TypeScript"

Browse Popular Code Answers by Language