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

0 vote111 views1 answer
React sagas state
Javascript React
0 vote117 views1 answer
Orderbychild firebase react
Javascript React
5 votes121 views1 answer
React native import svg image
Javascript React
14 votes106 views2 answers
Photo in React native
Javascript React
18 votes113 views3 answers
How to hide header in react navigation
Javascript React
1 vote112 views1 answer
What is react easy emoji
Javascript React
2 votes113 views1 answer
How to import lodash in react
Javascript React
1 vote108 views1 answer
React native header
Javascript React
23 votes112 views4 answers
Click to copy react
Javascript React
1 vote123 views1 answer
Android resource linking failed react native image crop picker
Javascript React