conditionally rendering the text based on whether a file has been selected or not. Here's how you can update your code to display "Maximum upload file size: 100MB" by default and switch to "Selected file: {fileName}" once a file is chosen:
const CSVUploader = ({ onUpload }) => {
const [file, setFile] = useState(null);
const [fileName, setFileName] = useState('');
const router = useRouter();
const handleFileChange = e => {
const selectedFile = e.target.files[0];
setFile(selectedFile);
setFileName(selectedFile ? selectedFile.name : ''); // Set filename if file is selected
};
return (
<div>
// Display filename if selected
{file ? (
<p
className="selected-file"
css={css`
margin-top: 5px;
font-size: 12px;
color: #888;
`}
>
Selected file: {fileName}
</p>
) : (
<p
className="upload-info"
css={css`
margin-top: 5px;
font-size: 12px;
color: #888;
`}
>
Maximum upload file size: 100MB
</p>
)}
</div>
);
};
const errorMessage = css`
color: red;
`;
export default CSVUploader;