text: /* eslint-disable radix */
  import React, { Fragment, useState } from "react";
  import axios from "axios";
  import Message from "./message";
  import Progress from "./progress";
  
  const FileUpload = () => {
    const [file, setFile] = useState("");
    const [filename, setFilename] = useState("Choose File");
    const [uploadedFile, setUploadedFile] = useState({});
    const [message, setMessage] = useState("");
    const [uploadPercentage, setUploadPercentage] = useState(0);
  
    const onChange = (e) => {
      setFile(e.target.files[0]);
      setFilename(e.target.files[0].name);
    };
  
    const onSubmit = async (e) => {
      e.preventDefault();
      const formData = new FormData();
      formData.append("file", file);
  
      try {
        const res = await axios.post("/upload", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
          onUploadProgress: (progressEvent) => {
            setUploadPercentage(
              parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total))
            );
          },
        });
  
        // Clear percentage
        setTimeout(() => setUploadPercentage(0), 10000);
  
        const { fileName, filePath } = res.data;
  
        setUploadedFile({ fileName, filePath });
  
        setMessage("File Uploaded");
      } catch (err) {
        if (err.response.status === 500) {
          setMessage("There was a problem with the server");
        } else {
          setMessage(err.response.data.msg);
        }
        setUploadPercentage(0);
      }
    };
  
    return (
      <>
        {message ? <Message msg={message} /> : null}
        <form onSubmit={onSubmit}>
          <div className="custom-file mb-4">
            <input type="file" className="custom-file-input" id="customFile" onChange={onChange} />
            <label className="custom-file-label" htmlFor="customFile">
              {filename}
            </label>
          </div>
  
          <Progress percentage={uploadPercentage} />
  
          <input type="submit" value="Upload" className="btn btn-primary btn-block mt-4" />
        </form>
        {uploadedFile ? (
          <div className="row mt-5">
            <div className="col-md-6 m-auto">
              <h3 className="text-center">{uploadedFile.fileName}</h3>
              <img style={{ width: "100%" }} src={uploadedFile.filePath} alt="" />
            </div>
          </div>
        ) : null}
      </>
    );
  };
  
  export default FileUpload;
  
  // /* eslint-disable react/button-has-type */
  // import { Axios } from "axios";
  
  // const UploadFile = () => {
  //   const formData = new formData();
  //   const onFileChange = (e) => {
  //     console.log(e.target.files[0]);
  //     if (e.target && e.target.file[0]) {
  //       formData.append("file", e.target.file[0]);
  //     }
  //   };
  //   const SubmitFileData = () ={
  //     Axios.post{
  //         "https://v2.convertapi.com/upload",
  //     }
  //   }
  
  //   return (
  //     <div className="container">
  //       <div>
  //         <input type="file" name="file_upload" onChange={onFileChange} />
  //       </div>
  //       <div>
  //         <button onClick={SubmitFileData}>Submit File</button>
  //       </div>
  //     </div>
  //   );
  // };
  
  // export default UploadFile;
  