I’m working on a Next.js Typescript project, which uses the FileUpload by PrimeReact. It works fine, but because the project is for german users, I wanted to change the value of the badge after the file is uploaded to:
“Completed” -> “Erfolgreich”
“Pending” -> “Wird verarbeitet”
The only info I found on the PrimeReact Documentary was to use the pt (pass-trough) props, to atleast get in touch with the badge.
Link to PrimeReact pt
But it didn’t worked out for me. I also tried item template, but then I just got many many bugs.
Here is my code:
import "./Upload.css";
import { FC } from "react";
import { FileUpload } from 'primereact/fileupload';
import { fetchData } from "./serverside";
interface UploadProps {
label?: string
}
const Upload:FC<UploadProps> = function Upload({ label = "Suche" }){
return (
<div className="file-upload-container">
<FileUpload
name="demo"
url=""
accept=".csv"
onUpload={onUpload}
maxFileSize={1000000}
chooseLabel={label}
auto
emptyTemplate={<p className="m-0">Drag & Drop | Datei hier ablegen</p>}
/>
</div>
)
}
const onUpload = async (event: any) => {
const files = event.files;
fetchData(files);
};
export default Upload;Upload.css:
.file-upload-container {
display: flex;
align-items: center;
width: 100%;
padding: 10px; /* Optional: Add padding for some spacing around */
}
.p-fileupload {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: flex-end;
width: 100%;
border: none; /* Remove border if any */
}
.p-fileupload-content {
flex: 1;
max-width: 300px; /* Set a fixed max width for the drag-and-drop area */
min-width: 150px; /* Set a minimum width to keep it from shrinking too much */
padding: 10px;
border: 1px dashed #ccc; /* Add a border to indicate the drop area */
border-radius: 4px; /* Optional: Rounded corners */
text-align: center; /* Center the text inside */
}
.p-fileupload-buttonbar {
display: flex;
align-items: center;
background-color: var(--grey-14);
border: none;
}
/* Hide elements with the attribute data-pc-section="filesize" */
.file-upload-container [data-pc-section="filesize"] {
display: none !important; /* Ensure the file size is hidden */
}I still have a css framework around it, so it may look a little bit different, but this is how it should like:
But to get back to the task, I just want to change the text of the “Completed” and “Pending” (<- when the upload is still on going)