Getting The Image Size On Upload In ReactJS

Hello friends, Today we will learn how to find the image size while uploading in ReactJs.

Prerequisite:-

Create React app using the following code.

npx create-react-app image-size

In App.js  write the following code to find the size of an image while uploading.

import './App.css';
import { useState } from 'react';

function App() {
 const [size , setsize] = useState(0)

  const handlechange =(e)=>{

      setsize(e.target.files[0].size)
     
  }
  return (
    <div className="App">
      <input type='file' onChange={handlechange} />
      <p>Size of image is {size}  Bytes</p>
    </div>
  );
}

export default App;

Here I am attaching the output for reference.

Hoping you have upgraded your knowledge. Please give your valuable feedback and if you have any questions or issues about this article, please let me know.