How to use a simple form for uploading files in React

import React, { useState } from 'react';
import './fileupload.css';
function FileUpload() {
  // Initializing selectedFile, setSelectedFile variables to display the details of the uploaded file in the console window
  const [selectedFile, setSelectedFile] = useState(null);
  // Initializing uploadSuccess, setUploadSuccess variables to display a message verifying that the upload is successful
  const [uploadSuccess, setUploadSuccess] = useState(false);
  // Initializing uploadFailed, setUploadFailed variables to display a message in case the file uploading operation is unsuccessful
  const [uploadFailed, setUploadFailed] = useState(false);
  // Initializing fileDetails, setFileDetails variables to store file information
  const [fileDetails, setFileDetails] = useState(null);
  // Initializing uploadProgress, setUploadProgress variables to track the upload progress
  let [uploadProgress, setUploadProgress] = useState(0);
  // Initalizing description, setDescription variables for adding description
  const [description, setDescription] = useState('');
  //Initializing uploadDateTime, setUploadDateTime variables for file upload date and time 
  const [uploadDateTime, setUploadDateTime] = useState('');
  // Function to handle file input change
  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
    setFileDetails(null); //clears the file details from the webpage
  };
  // Function to handle form submission
  const handleSubmit = (event) => {
    //this function prevents default submission behavior
    event.preventDefault();
    if (selectedFile) {
      // If the upload date and time is not entered, display an error message
      if (!uploadDateTime) {
        setUploadFailed(true); //initializing the upload failed variable to true
        setUploadSuccess(false); //initializing the upload success variable to false
        setFileDetails(null);
      } else {
        setUploadSuccess(false); //seting the upload success variable to false
        setUploadFailed(false); //setting the upload failed variable to false
        setUploadProgress(0);  //setting upload progress to zero
        // Simulate upload progress using a timeout
        const uploadInterval = setInterval(() => {
          if (uploadProgress < 100) { //checking if upload progress is less than 100
            uploadProgress = uploadProgress + 10;
            setUploadProgress(uploadProgress);
          } else { //when the upload process reaches 100%
          //the progress simulation interval is stopped
            clearInterval(uploadInterval);
            // Set upload success variable to true
            setUploadSuccess(true);
            //calculating the filesize in KBs, and setting its details (e.g., name, type, and filesize)
            const fileSizeInKB = Math.round(selectedFile.size / 1024);
            setFileDetails({
              name: selectedFile.name,
              type: selectedFile.type,
              size: fileSizeInKB,
            });
            console.log('Uploaded File:', selectedFile);
          }
        }, 800); //Simulating upload progress every 0.8 seconds
      }
    } else {
      setUploadFailed(true);
      setUploadSuccess(false);
      setFileDetails(null);
    }
  };
  
  // Extra function to refresh the page after uploading the file
  const refreshPage = () => {
    setSelectedFile(null); // Clear the selected file
    setFileDetails(null); 
    setUploadSuccess(false); 
    setUploadFailed(false);
    setUploadProgress(0);  //reset the upload progress to zero
    window.location.reload();
  };
  // Render method within the return statement that triggers handleSubmit and handleFileChange
  // Extra features implemented including printing the details of the file uploaded as well as a message showing that the upload was successful;
  // In the case of no file being uploaded, a refresh button appears to try uploading files again
  return (
    <div>
      <h2>Uploading files using a form in React</h2>
      <form onSubmit={handleSubmit}>
        <input className="title" id="fileInput" type="file" onChange={handleFileChange} />
        {/*adding a description field for adding description of the file to be uploaded*/}
        <input
          className="description-input"
          type="text"
          placeholder="Enter description"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
        />
        {/* Adding input field for upload date and time */}
        <font size= "3"> Upload date: </font><input
          type="datetime-local"
          value={uploadDateTime}
          onChange={(e) => setUploadDateTime(e.target.value)}
        />
        <button type="submit">Upload</button>
      </form>
      <div>
        {uploadProgress > 0 && uploadProgress < 100 && (
          <div>
            <b className="right-shift">Uploading...</b>
            <progress value={uploadProgress} max="100">
              {uploadProgress}%
            </progress>
          </div>
        )}
        {uploadSuccess && (
          <div>
            <b className="right-shift">Uploaded successfully!</b>
            <p>Details of file uploaded:</p>
            <p>Name: {fileDetails.name}</p>
            <p>Type: {fileDetails.type}</p>
            <p>Description: {description}</p>
            <p>Upload date and time: {uploadDateTime}</p>
            <button onClick={refreshPage}>Remove File</button>
          </div>
        )}
        {uploadFailed && <b className="right-shift">Upload failed. Please try again!</b>}
        {uploadFailed && <button onClick={refreshPage}>Refresh</button>}
      </div>
    </div>
  );
}
export default FileUpload;

import React from 'react';
import './App.css';
import FileUpload from './FileUpload';
function App() {
  //adding the contents of the FileUpload form inside <div> classes for better code organization
  return (
    <div className="App">
      <header className="App-header">
        <FileUpload />
      </header>
    </div>
  );
}
export default App;