Image Preview in React JS

 step 1 : npm i axios 

 step 2 : replace the App.js code with below code

import { useState } from "react";

import axios from "axios";

function App() {

  const [image, setImage] = useState('')

  const handleChange = (e) => {

    console.log(e.target.files)

    setImage(e.target.files[0])

  }

  const handleApi = () => {

    //call the api

    const url = ''

    const formData = new FormData()

    formData.append('image', image)

    axios.post(url, formData).then(result => {

      console.log(result.data)

      alert('success')

    })

      .catch(error => {

        alert('service error')

        console.log(error)

      })

  }

  return (

    <div>

      IMAGE UPLOAD <br />

      <img src={image ? URL.createObjectURL(image) : null} width={150} height={70} />

      <input type="file" onChange={handleChange} /> <br />

      <button onClick={handleApi} >SUBMIT</button>

    </div>

  );

}

export default App;

Check the Video for detail explaination :