text: import React, { useState, useEffect } from "react";
  import UploadService from "../services/FileUploadService";
  
  // import Plot from "react-plotly.js";
  
  import http from "../http-common";
  
  const UploadFiles = () => {
      const [selectedFiles, setSelectedFiles] = useState(undefined);
      const [currentFile, setCurrentFile] = useState(undefined);
      const [progress, setProgress] = useState(0);
      const [message, setMessage] = useState("");
      const [fileInfos, setFileInfos] = useState([]);
  
      useEffect(() => {
          UploadService.getFiles().then((response) => {
              setFileInfos(response.data);
          });
      }, []);
  
      const selectFile = (event) => {
          setSelectedFiles(event.target.files);
      };
  
      const test = () => {
          setCurrentFile(selectedFiles[0]);
          var formData = new FormData();
          formData.append("file", currentFile);
          http.post("/upload2d", formData, {
              headers: {
                  "Content-Type": "multipart/form-data",
              }
          });
      }
  
      const upload = () => {
          let currentFile = selectedFiles[0];
  
          setProgress(0);
          setCurrentFile(currentFile);
  
          UploadService.upload(currentFile, (event) => {
              setProgress(Math.round((100 * event.loaded) / event.total));
          })
              .then((response) => {
                  setMessage(response.data.message);
                  return UploadService.getFiles();
              })
              .then((files) => {
                  setFileInfos(files.data);
              })
              .catch(() => {
                  setProgress(0);
                  setMessage("Could not upload the file!");
                  setCurrentFile(undefined);
              });
  
          setSelectedFiles(undefined);
      };
  
      return (
          <div>
              {currentFile && (
                  <div className="progress">
                      <div
                          className="progress-bar progress-bar-info progress-bar-striped"
                          role="progressbar"
                          aria-valuenow={progress}
                          aria-valuemin="0"
                          aria-valuemax="100"
                          style={{ width: progress + "%" }}
                      >
                          {progress}%
                      </div>
                  </div>
              )}
  
              <label className="btn btn-default">
                  <input type="file" onChange={selectFile} />
              </label>
  
              <button
                  className="btn btn-success"
                  disabled={!selectedFiles}
                  onClick={test}
              >
                  Upload
              </button>
  
              <div className="alert alert-light" role="alert">
                  {message}
              </div>
  
              <div className="card">
                  <div className="card-header">List of Files</div>
                  <ul className="list-group list-group-flush">
                      {fileInfos &&
                      fileInfos.map((file, index) => (
                          <li className="list-group-item" key={index}>
                              <a href={file.url}>{file.name}</a>
                          </li>
                      ))}
                  </ul>
              </div>
  
          </div>
      );
  };
  
  export default UploadFiles;