Answers for "show preview of image before upload react"

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

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>