react image upload

1//ReactJs
2
3import {useState } from "react";
4
5export default function Home() {
6	 const [file,  setFile] = useState("")
7     
8     const handleChange = (e) =>{
9       setFile(URL.createObjectURL(e.target.files[0]))
10     }
11     
12     return (
13         <div>
14          <input type="file" onChange={handleChange}/>
15          <img src={file}/>
16        </div>
17     )
18	
19}
20
21
22

1<!-- html + Javascript -->
2
3//js
4<script>
5  const handleChange = (e) =>{
6     const file = URL.createObjectURL(e.target.files[0])
7     document.getElementById("preview-img").src = file;
8  }
9  document.getElementById("file-input").addEventListener("change", handleChange);
10</script>
11     
12
13 //html
14 <div>
15  <input id="file-input" type="file"/>
16  <img id="preview-img" src="" width="200"/>
17</div>
18

1/* Answer to: "react image upload" */
2
3/*
4  "react-images-upload" is a simple component for upload and
5  validate (client side) images with preview built with React.js.
6  This package use "react-flip-move [1]" for animate the file preview
7  images.
8  
9  Download it here:
10  https://www.npmjs.com/package/react-images-upload
11  
12  or if you need help or don't want to use packages,
13  you can watch this video:
14  https://www.youtube.com/watch?v=XeiOnkEI7XI
15
16  [1] Link to "react-flip-move", mentioned in the 
17  "react-images-upload" summary:
18  https://github.com/joshwcomeau/react-flip-move
19*/

1import FileBase64 from "react-file-base64";
2// FileBase64 <- use as component
3
4<FileBase64 
5	type="file"
6    multiple={false} <- if want to upload multiple images set "true"
7    onDone={} <- take callback function
8/>
9
10// onDone return an object of: filename, fileType, base64 data
11// use the setState or function of useState to grap the base64 data