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

6 votes139 views2 answers
Hr react
Javascript React
-2 votes152 views1 answer
How to hide keyboard in react native
Javascript React
12 votes156 views3 answers
Font weight react native
Javascript React
0 vote154 views1 answer
Link tag react
Javascript React
0 vote168 views1 answer
Image and video lightbox react
Javascript React
0 vote156 views1 answer
How we can set react select required
Javascript React
0 vote215 views1 answer
Uuid react native expo
Javascript React
139 votes317 views6 answers
Creat react app
Javascript React
15 votes159 views2 answers
Ternary react
Javascript React
15 votes147 views1 answer
Reducer in react example
Javascript React