Upload image react

How to upload image in react js

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

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;

Source: stackoverflow.com

Similar codes

7 votes120 views2 answers
Uuid v4 react
Javascript React
15 votes120 views2 answers
React check if url address is valid
Javascript React
0 vote118 views1 answer
Circle button react native
Javascript React
4 votes136 views2 answers
React helmet
Javascript React
125 votes238 views6 answers
Install React Bootstrap
Javascript React
15 votes125 views8 answers
React bootstrap
Javascript React
17 votes107 views5 answers
How to run react native app
Javascript React
5 votes123 views2 answers
Gradlew clean in react native
Javascript React
35 votes121 views6 answers
Create react app with tailwind
Javascript React
0 vote119 views1 answer
Implement cai webchat in react native
Javascript React