在react.js中将文件发送到服务器时渲染加载器

import React, { useState } from 'react';
import { useDropzone } from 'react-dropzone';

const FileUploader = () => {
  const [file, setFile] = useState(null);
  const [uploadProgress, setUploadProgress] = useState(0);

  const onDrop = (acceptedFiles) => {
    const uploadedFile = acceptedFiles[0];
    setFile(uploadedFile);

    // Perform file upload using AJAX or other methods
    const uploadTask = uploadFile(uploadedFile);

    // Update upload progress
    uploadTask.on('progress', (snapshot) => {
      const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
      setUploadProgress(progress);
    });
  };

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {isDragActive ? (
        <p>Drop the file here...</p>
      ) : (
        <p>Drag and drop a file here, or click to select a file</p>
      )}
      {file && (
        <div>
          <p>File: {file.name}</p>
          <p>Size: {file.size} bytes</p>
          <p>Progress: {uploadProgress}%</p>
        </div>
      )}
    </div>
  );
};

export default FileUploader;