SingleFileUpload

import axios from "axios";
import { useEffect, useState } from "react";
import LinearProgressBar from "./linear-progress-bar";

const url = "/api/uploads/individualDocuments/619f46d6d61a96b56f39cdfe";
export default function SingleFileUploadCard({ file }) {
  const [progress, setProgress] = useState(0);

  console.log("Progress: ", progress);

  const uploadFile = async (file) => {
    let percentage = 0;
    const formData = new FormData();
    formData.append("files", file);

    const config = {
      onUploadProgress: (progressEvent) => {
        const { loaded, total } = progressEvent;
        percentage = Math.floor((loaded * 100) / total);
        console.log(`${loaded}kb of ${total}kb | ${percentage}%`);

        setProgress(percentage);
      },
    };

    try {
      const res = await axios.post(url, formData, config);
      console.log("Result data: ", res);
      setTimeout(() => {
        setProgress(0);
      }, 1000);
    } catch (error) {
      console.error(
        "Error response data message: ",
        error.response.data.message
      );
      console.error("Error message: ", error.message);
    } finally {
      console.log("Upload complete");
    }
  };

  useEffect(() => {
    // to have a progress bar

    // const upload = async () => {
    //   await uploadFile(file, setProgress);
    //   // console.log("url: ", url);
    // };

    uploadFile(file);
  }, []);

  return (
    <>
      <div className="flex items-center justify-between">
        <div>{file.name}</div>
        <div>{file.size}KB</div>
        <button type="button">Remove</button>
      </div>

      {progress > 0 && <LinearProgressBar value={progress} />}
    </>
  );
}

const uploadFile = async (file, onProgress) => {
  let percentage = 0;
  const url = "/api/uploads/individualDocuments/619f46d6d61a96b56f39cdfe";
  const formData = new FormData();
  formData.append("files", file);

  const config = {
    onUploadProgress: (progressEvent) => {
      const { loaded, total } = progressEvent;
      percentage = Math.floor((loaded * 100) / total);
      console.log(`${loaded}kb of ${total}kb | ${percentage}%`);

      onProgress(percentage);
    },
  };

  try {
    const res = await axios.post(url, formData, config);
    console.log("Result data: ", res);
  } catch (error) {
    console.error("Error response data message: ", error.response.data.message);
    console.error("Error message: ", error.message);
  } finally {
    console.log("Upload complete");
  }

  // const postResponse = axios
  //   .post(url, formData, config)
  //   .then((res) => {
  //     console.log(res.data);
  //     onProgress(percentage),
  //       () => {
  //         setTimeout(() => {
  //           onProgress(0);
  //         }, 1000);
  //       };
  //   })
  //   .catch((error) => {
  //     console.log("Upload error: ", error);
  //   });

  // postResponse.then(() => {
  //   console.log("File uploaded successfully");
  // });
};

{
  /* <>
<td className="px-6 py-2 text-gray-900 lg:px-2 whitespace-nowrap">
  <div>{file_name}</div>
</td>
<td className="px-6 py-2 text-gray-900 lg:px-0 lg:pr-6 whitespace-nowrap">
  <div>
    <input
      type="text"
      className="form-control"
      placeholder="2 Government ID (Front and Back)"
    />
  </div>
</td>

<td className="px-6 py-2 text-gray-900 lg:px-0 lg:pr-6 whitespace-nowrap">
  <div>{size}</div>
</td>

<td className="px-6 text-sm font-medium text-center lg:px-4 whitespace-nowrap">
  <button className="transition duration-100 ease-out text-primary hover:text-forgot active:text-primary">
    Download
  </button>
</td>
<td className="px-6 text-sm font-medium text-center lg:px-4 whitespace-nowrap">
  <button className="transition duration-100 ease-out text-primary hover:text-forgot active:text-primary">
    Remove
  </button>
</td> */
}