React Js Get Size of File

<!DOCTYPE html>
<html>

function formatFileSize(bytes) {
      const megabytes = bytes / (1024 * 1024);
      return megabytes.toFixed(2) + " MB";
    }

function App() {
      const [fileSize, setFileSize] = useState(null);

const handleFileChange = (event) => {
        const selectedFile = event.target.files[0];

if (selectedFile) {
          const sizeInBytes = selectedFile.size;
          setFileSize(formatFileSize(sizeInBytes));
        } else {
          setFileSize(null);
        }
      };

return (
        <div className='container'>
          <h3>React Js Get File Size</h3>
          <input type="file" className='file-input' onChange={handleFileChange} />
          {fileSize && <p className='file-size'>File size: {fileSize}</p>}
        </div>
      );
    }

ReactDOM.render(<App />, document.getElementById("app"));
  </script>

.container {
      margin: 0 auto;
      width: 500px;
      text-align: center;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
      padding: 20px;
    }

/* Style the file size text */
    .file-size {
      margin-top: 10px;
      font-size: 14px;
      color: #555;
    }
  </style>
</body>

</html>