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 vote285 views1 answer
./node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.js
Javascript React
0 vote249 views1 answer
How to use two text fields in one single row react js
Javascript React
-1 vote228 views1 answer
Command not found:create-react-app
Javascript React
0 vote202 views1 answer
React-bootstrap problem-install new version
Javascript React
2 votes268 views2 answers
Video in react native stack overflow
Javascript React
0 vote214 views1 answer
'{ state: any; dispatch: React.Dispatch<{ type: string; payload: any; }>; }' is not assignable to type 'Store'
Javascript React
11 votes213 views4 answers
React native text underline
Javascript React
2 votes224 views1 answer
Import React, { memo } from 'react';
Javascript React
-1 vote268 views1 answer
Install proptypes react
Javascript React
0 vote437 views1 answer
Window.location.search get parameters react
Javascript React