0
113
ViewsReact js personalizando la entrada de tipo de archivo usando CSS
Tengo una entrada de tipo archivo que debe personalizarse. Necesito agregar un ícono en el botón de entrada, cambiar el nombre del botón y finalmente ocultar el nombre del archivo seleccionado. Probé diferentes métodos como usar un <div> o <a> pero el problema es que necesito transferir el archivo seleccionado al formato json. Entonces, invocar la acción de navegación a través de JavaScript está causando un error en la conversión. Necesito usar una entrada personalizable de tipo archivo
<input type="file"/>como necesito que se vea
2 answers
Answer question0
Puede lograr esto con la etiqueta y ocultando la entrada. Por supuesto, debe diseñarlo correctamente y escribir una función handleFile.
<div> <label onChange={handleFile} htmlFor="formId"> <input name="" type="file" id="formId" hidden /> <Icon> </label> </div>0
Usar la etiqueta de label HTML y la propiedad htmlFor es la mejor solución para esto.
Paso 1: Cree un componente genérico para brindarle la funcionalidad de entrada de archivos.
// UploadControl.js const UploadControl = ({ children, value, onChange, disabled, accept }) => { return ( <label htmlFor="contained-button-file" className="m-0 w-100"> <input value={value} accept={accept} disabled={disabled} style={{ display: 'none' }} id="contained-button-file" multiple type="file" onChange={disabled ? () => {} : onChange} /> {children} </label> ); };Paso 2: use este componente envolviendo su interfaz de usuario de estilo personalizado.
<button className="btn-styles"> <UploadControl onChange={handleAddBanner} accept="image/*"> Add New Banner </UploadControl> </button>Paso 3: implemente un controlador para obtener su archivo.
const handleAddBanner = ({ target: { files } }) => { const loadedImage = files[0]; // loadedImage will be a image file. };