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