Answers for "react fileupload with preview"

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
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

Code answers related to "TypeScript"

Browse Popular Code Answers by Language