Probé varios enfoques, pero parece que no puedo borrar un campo de texto de IU de Material con type="file"
Estoy limitando el tamaño del archivo, y si un usuario sobrepasa el límite, aparece un mensaje de error, pero también es necesario borrar el campo de texto.
Aquí está mi código:
function CreateClaim(props) { const [supporting_docs, setSupportingDocs] = useState(null); const handleFileUpload = (event) => { event.preventDefault() if(event.target.files[0].size > 10971520) { setFileError(true) setSupportingDocs(null) } else { setSupportingDocs(event.target.files) } }; return ( <TextField onChange={handleFileUpload} InputLabelProps={{ shrink: true }} margin="normal" required fullWidth id="supporting_docs" label="Bewys van uitgawe" name="supporting_docs" type="file" /> ) } export default CreateClaimEl mensaje de error funciona bien, pero no puedo borrar el campo de texto, ¿alguna sugerencia?
Puedes agregar esta línea:
if (event.target.files[0].size > 10971520) { setFileError(true); setSupportingDocs(null); e.target.value = null; }Puedes probar esto. Si el archivo tiene más de 1 MB, mostrará un error.Click para ver vista previa
const Demo = () => { const [error, setError] = useState(false); const handleFileUpload = (e) => { console.log(e.target.files[0]); const file = e.target.files[0]; if(file.size) return setError(true) } return(<> {error ? <h1 style={{color: 'red'}} >Error</h1> : <TextField onChange={handleFileUpload} InputLabelProps={{ shrink: true }} margin="normal" required fullWidth id="supporting_docs" label="Bewys van uitgawe" name="supporting_docs" type="file" />} </>) }