I’m using Ant design’s Upload Component in my code to enable file uploading and replacing.
Following are the props I’ve defined:
const uploadProps = {
beforeUpload: async (file) => {
// console.log('file:', file);
const allowedExtensions = ["pdf", "docx"];
const fileExtension = file.name.split(".").pop().toLowerCase();
if (file.size < 50 * 1000) {
toast.error('CV file must be at least 50KB in size', {theme: 'dark'})
} else if (file.size > 5 * 1000000) {
toast.error('CV file cannot exceed 5MB in size', {theme: 'dark'})
} else {
if (!allowedExtensions.includes(fileExtension)) {
toast.error("Only PDF and DOCX files are allowed.", {theme: 'dark'});
return Upload.LIST_IGNORE;
}
if (isUploaded) {
toast.error("You can upload only one CV at a time.", {theme: 'dark'});
return Upload.LIST_IGNORE;
}
setLoading(true);
try {
const formData = new FormData();
formData.append("file", file);
const response = await axios.post(
`${import.meta.env.VITE_BASE_URL_PYTHON}/upload-cv`,
formData,
{
headers: {
"Content-Type": "multipart/form-data",
},
}
);
if (response.status === 200 && response.data) {
const { _id } = response.data.data;
const { fileSize } = response.data.data;
setUserData({ fileSize: fileSize });
setRecordId(_id);
setUploadedFile(file.name);
setIsUploaded(true);
setLoading(false);
} else {
toast.error("Failed to upload CV. Please try again.");
setLoading(false);
}
} catch (error) {
toast.error("An error occurred while uploading.");
console.error("Upload error:", error);
}
}
return false; // Prevent automatic upload
},
};
const handleDeleteCV = () => {
setUploadedFile(null); // Remove uploaded file name
setRecordId(null); // Reset record ID
setIsUploaded(false); // Mark as not uploaded
// toast.info("CV has been deleted.");
};
const replaceProps = {
beforeUpload: async (file) => {
const allowedExtensions = ["pdf", "docx"];
const fileExtension = file.name.split(".").pop().toLowerCase();
if (file.size < 50 * 1000) {
toast.error('CV file must be at least 50KB in size', {theme: 'dark'})
console.log('replace prop min size');
return Upload.LIST_IGNORE;
} else if (file.size > 5 * 1000000) {
toast.error('CV file cannot exceed 5MB in size', {theme: 'dark'})
console.log('replace prop max size');
return Upload.LIST_IGNORE;
} else if (!allowedExtensions.includes(fileExtension)) {
toast.error("Only PDF and DOCX files are allowed.", {theme: 'dark'});
return Upload.LIST_IGNORE;
} else {
if (isUploaded) {
handleDeleteCV();
}
setLoading(true);
try {
const formData = new FormData();
formData.append("file", file);
const response = await axios.post(
`${import.meta.env.VITE_BASE_URL_PYTHON}/upload-cv`,
formData,
{
headers: {
"Content-Type": "multipart/form-data",
},
}
);
if (response.status === 200 && response.data) {
const { _id } = response.data.data;
setRecordId(_id);
setUploadedFile(file.name);
setIsUploaded(true); // Mark CV as uploaded
// toast.success("CV uploaded successfully!");
// handleDeleteCV()
setLoading(false);
} else {
toast.error("Failed to upload CV. Please try again.", {theme: 'dark'});
setLoading(false);
}
} catch (error) {
toast.error(error || "An error occurred while uploading.", {theme: 'dark'});
console.error("Upload error:", error);
setLoading(false);
}
return false; // Prevent automatic upload
}
},
};
But the issue I’m facing is that the error toast appears if the selected file isn’t a valid (less than 50kb or greater than 5MB) while uploading (using ‘uploadProps’) but it doesn’t work when I try to replace the file with invalid file (using ‘replaceProps’). Instead, all the error toasts show up when I select a valid file.
I made two different props for uploading and replacing.
I tried to add
return false
and
return Upload.LIST_IGNORE
but didn’t work.