Material UI (MUI) és una biblioteca popular per a facilitar el desenvolupament de la interfície d'usuari en aplicacions React. Tanmateix, quan es implementa la funcionalitat d'upload de fitxers, es poden trobar amb diversos errors o problemes comuns. En aquest article, explicarem errors comuns i solucions per a l'upload de fitxers utilitzant Material UI.
Si està integrat amb React Hook Form, pot ser que, després de seleccionar un fitxer, els valors del formulari no s'actualitzin i quedi un error de validació.
Solució: Configureu explícitament el valor amb la funció setValue
.
import { useForm } from 'react-hook-form';
const { register, setValue, handleSubmit, formState: { errors } } = useForm();
const handleFileChange = (event) => {
const file = event.target.files[0];
setValue('uploadFile', file);
};
Solució: Especifiqueu component="label"
en el component Button
.
<Button variant="contained" component="label">
Seleccionar fitxer
<input type="file" hidden onChange={handleFileChange} />
</Button>
accept
és ignoratSolució: Utilitzeu un element input
natiu o assegureu-vos que l'atribut es reflecteixi correctament.
<input type="file" accept=".jpg,.png" onChange={handleFileChange} />
Solució: Afegiu validació amb JavaScript.
const handleFileChange = (event) => {
const file = event.target.files[0];
const maxSize = 2 * 1024 * 1024; // 2MB
const allowedExtensions = ['jpg', 'png'];
const fileExtension = file.name.split('.').pop().toLowerCase();
if (file.size > maxSize) {
alert('La mida del fitxer és massa gran.');
return;
}
if (!allowedExtensions.includes(fileExtension)) {
alert('Format de fitxer no permès.');
return;
}
// Procesos si el fitxer compleix les condicions
};
setValue
quan utilitzeu MuiFileInput
component="label"
en Button
?accept
de l'element input
funciona correctament?Com a eina útil per a les proves i demostracions de la funcionalitat d'upload de fitxers, podeu utilitzar UploadF.
És possible que es presentin diversos errors durant la implementació de la funcionalitat d'upload de fitxers amb Material UI, però si segueixes el contingut d'aquest article i tractes correctament els errors, podràs avançar en el desenvolupament sense problemes.