|
how to upload image in react js
<![CDATA[import FileBase64 from "react-file-base64";
// FileBase64 <- use as component
<FileBase64
type="file"
multiple={false} <- if want to upload multiple images set "true"
onDone={} <- take callback function
/>
// onDone return an object of: filename, fileType, base64 data
// use the setState or function of useState to grap the base64 data]]>
upload image react
<![CDATA[import React, { useState } from "react";
const UploadAndDisplayImage = () => {
const [selectedImage, setSelectedImage] = useState(null);
return (
<div>
<h1>Upload and Display Image usign React Hook's</h1>
{selectedImage && (
<div>
<img alt="not fount" width={"250px"} src={URL.createObjectURL(selectedImage)} />
<br />
<button onClick={()=>setSelectedImage(null)}>Remove</button>
</div>
)}
<br />
<br />
<input
type="file"
name="myImage"
onChange={(event) => {
console.log(event.target.files[0]);
setSelectedImage(event.target.files[0]);
}}
/>
</div>
);
};
export default UploadAndDisplayImage;]]>
|
