How to create a progress bar for 3D model uploads in a React.js app

Creating a progress bar for 3D model uploads in a React.js app involves tracking the progress of the upload using XMLHttpRequest or Fetch API and updating the UI accordingly. Here's a basic implementation of a progress bar component:

javascriptCopy code
import React, { useState } from 'react';

const UploadProgressBar = () => {
  const [progress, setProgress] = useState(0);

  // Function to handle file upload
  const handleFileUpload = async (event) => {
    const file = event.target.files[0];

    if (file) {
      const formData = new FormData();
      formData.append('file', file);

      const uploadUrl = 'YOUR_UPLOAD_ENDPOINT'; // Replace with your upload endpoint URL

      const xhr = new XMLHttpRequest();

      // Track upload progress
      xhr.upload.addEventListener('progress', (event) => {
        if (event.lengthComputable) {
          const percentComplete = (event.loaded / event.total) * 100;
          setProgress(percentComplete);
        }
      });

      // Handle upload completion
      xhr.onload = () => {
        if (xhr.status === 200) {
          console.log('Upload complete');
          // Do something after successful upload
        } else {
          console.error('Upload failed');
          // Handle upload failure
        }
      };

      // Handle upload errors
      xhr.onerror = () => {
        console.error('Upload error');
        // Handle upload error
      };

      xhr.open('POST', uploadUrl, true);
      xhr.send(formData);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileUpload} />
      <div className="progress-bar-container">
        <div
          className="progress-bar"
          style={{ width: `${progress}%` }}
        ></div>
      </div>
      <p>{progress.toFixed(2)}% Complete</p>
    </div>
  );
};

export default UploadProgressBar;

This component includes an input field for selecting the file to upload. The handleFileUpload function is triggered when a file is selected. Inside this function, an XMLHttpRequest is used to upload the file to the server. The progress state variable is updated as the upload progresses, which in turn updates the width of the progress bar in the UI.

You need to replace 'YOUR_UPLOAD_ENDPOINT' with the actual URL where you want to upload your 3D models. Make sure your server supports handling file uploads and sends back appropriate responses.

Styling for the progress bar can be done using CSS. Here's a simple example:

cssCopy code
.progress-bar-container {
  width: 100%;
  height: 20px;
  border: 1px solid #ccc;
  margin-top: 10px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: #4caf50;
}

You can customize the styling to match your app's design requirements.