Reputation: 3
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>
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
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:
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