Abhipsa Mohapatra
Abhipsa Mohapatra

Reputation: 3

Spinner Loading and progress not shown in antd design upload even after successful upload

I am new at react and was using antd-design as the wrapper for my react model.I am specifically using upload feature a variation of upload feature given in the documentation of antd design here:

https://ant.design/components/upload

This is my code: const [uploading, setUploading] = useState(false);

  const handleFileChange = (info) => {

    if (info.file.status !== "uploading") {

      console.log(info.file, info.fileList);

     }



    if (info.file.status === "done") {

       message.success(`${info.file.name} file uploaded successfully`);

       setUploading(false);

    } else if (info.file.status === "error") {

      message.error(`${info.file.name} file upload failed.`);

      setUploading(false);

     }

  };



    const beforeUpload = (file) => {

     const isPdf = file.type === "application/pdf";

     if (!isPdf) {

       message.error("You can only upload PDF files!");

                 }

      return isPdf;

      };



     const uploadFile = (file) => {

         setUploading(true);

       // Simulating a delay to show progress

         setTimeout(() => {

         message.success(`${file.name} file uploaded successfully`);

          setUploading(false);

        }, 2000);

       };



            <Upload

            accept=".pdf"

            beforeUpload={beforeUpload}

            customRequest={({ file }) => {

              uploadFile(file);

            }}

            onChange={handleFileChange}

          >

            <Button icon={<UploadOutlined />} loading={uploading}>

              {uploading ? "Uploading" : "Upload PDF"}

            </Button>

          </Upload>

enter image description here

However even after uploading the spinner in the button goes away but the progress for the attachment is not shown and the spinner keeps spinning for the attachment as shown. How do I rectify this what is the error. Please help

I tried this:

  const [uploading, setUploading] = useState(false);

  const handleFileChange = (info) => {

    if (info.file.status !== "uploading") {

      console.log(info.file, info.fileList);

     }



    if (info.file.status === "done") {

       message.success(`${info.file.name} file uploaded successfully`);

       setUploading(false);

    } else if (info.file.status === "error") {

      message.error(`${info.file.name} file upload failed.`);

      setUploading(false);

     }

  };



    const beforeUpload = (file) => {

     const isPdf = file.type === "application/pdf";

     if (!isPdf) {

       message.error("You can only upload PDF files!");

                 }

      return isPdf;

      };



     const uploadFile = (file) => {

         setUploading(true);

       // Simulating a delay to show progress

         setTimeout(() => {

         message.success(`${file.name} file uploaded successfully`);

          setUploading(false);

        }, 2000);

       };



            <Upload

            accept=".pdf"

            beforeUpload={beforeUpload}

            customRequest={({ file }) => {

              uploadFile(file);

            }}

            onChange={handleFileChange}

          >

            <Button icon={<UploadOutlined />} loading={uploading}>

              {uploading ? "Uploading" : "Upload PDF"}

            </Button>

          </Upload>

and I was expecting the spinner to stop spinning after the upload

Upvotes: 0

Views: 1109

Answers (1)

Ved
Ved

Reputation: 1028

If you are utilizing the customRequest feature, please ensure to verify the following:

Firstly, you may need to install the rc-upload package if it is not already installed. To do so, execute the following command:

npm install rc-upload

Next, import the <Upload/> component into your project. Utilize the following import statement:

import Upload from "rc-upload";

By utilizing props such as onStart, onProgress, onSuccess and onError, you can modify the status of the upload button and even display a progress bar.

Below is an example that you can refer to:

App.jsx

import React, { useState } from "react";
import axios from "axios";
import { UploadOutlined } from "@ant-design/icons";
import { Button, message, Progress } from "antd";
import Upload from "rc-upload";
import "./index.css";

const App = () => {
  const [uploading, setUploading] = useState(false);
  const [progress, setProgress] = useState(0);

  const props = {
    onStart: (file) => {
      console.log("onStart", file);
      setUploading(true);
    },
    onProgress: (file) => {
      console.log("Progress", file);
      setUploading(true);
    },
    onSuccess: (ret) => {
      console.log("onSuccess", ret);
      message.success(`${ret} file uploaded successfully`);
      setUploading(false);
    },
    onError: (err, file) => {
      console.log("onError", err);
      message.error(`Unable to upload ${file}!! ${err}`);
      setUploading(false);
    }
  };

  const beforeUpload = (file) => {
    const isPdf = file.type === "application/pdf";
    if (!isPdf) {
      message.error("You can only upload PDF files!");
    }
    return isPdf;
  };

  const uploadFile = async (file, onSuccess, onProgress, onError) => {

    // This is just a basic example, and you may need to modify it to fit your specific use case.
    const config = {
      headers: { "content-type": "multipart/form-data" },
      onUploadProgress: (event) => {
        const percent = Math.floor((event.loaded / event.total) * 100);
        setProgress(percent);
        if (percent === 100) {
          setTimeout(() => setProgress(0), 1000);
        }
        onProgress({ percent: (event.loaded / event.total) * 100 });
      }
    };

    try {
      const res = await axios.post(
        "https://jsonplaceholder.typicode.com/posts",
        file,
        config
      );
      onSuccess(file.name);
      console.log("Success: ", res);
    } catch (err) {
      console.log("Error: ", err);
      onError(err, file.name);
    }
  };

  return (
    <Upload
      accept=".pdf"
      beforeUpload={beforeUpload}
      customRequest={({ file, onSuccess, onProgress, onError }) => {
        uploadFile(file, onSuccess, onProgress, onError);
      }}
      {...props}
    >
      <Button icon={<UploadOutlined />} loading={uploading}>
        {uploading ? "Uploading" : "Upload PDF"}
      </Button>
      {progress > 0 ? <Progress percent={progress} size="small" /> : null}
    </Upload>
  );
};
export default App;

Output:

demo

Note: This is just a basic example, and you may need to modify it to fit your specific use case.

For more info please refer:

https://upload-react-component.vercel.app/

https://github.com/react-component/upload#customrequest

Hope this helps!! :)

Thank you!

Upvotes: 0

Related Questions