0
664
Views¿Cómo obtener el nombre del archivo del archivo cargado usando javascript?
quiero obtener el nombre del archivo y mostrarlo en el elemento de entrada usando javascript.
tengo un botón de carga al hacer clic que abriría el navegador para elegir el archivo una vez elegido, debería mostrar el nombre del archivo elegido en el elemento de entrada.
a continuación está mi código,
const kubeConfig = get(values, `${fieldRoot}.kubeConfig`); const fileName = useMemo(() => { if (kubeConfig) { return kubeConfig.name; //cannot read property name of undefined } }, [kubeConfig]) <FormField label="file" fieldId={`${fieldRoot}.kubeConfig`} > {({form}: FieldProps) => ( <> <input type="text" value={fileName ?? 'Upload file'} /> <input type="file" style={{display: 'none'}} accept=".pem" ref={inputRef} onChange={async() => { const file = inputRef?.current?.files?.[0]; if (file) { try { form.setFieldValue( `${fieldRoot}.kubeConfig`, file ); } } }} /> <button onClick={handleUploadClick}> Upload </button> )} </FormField>me sale el error no puedo leer el nombre de la propiedad de indefinido.
Los datos de kubeconfig son como a continuación
Soy nuevo en el aprendizaje de programación sobre la marcha. Podría alguien ayudarme con esto. Gracias. ¿Cómo puedo acceder al nombre desde los datos de kubeConfig?
2 answers
Answer question0
Las entradas de archivos tienen una propiedad de files que se puede consultar para obtener el nombre del archivo, el tipo MIME y el tamaño (en bytes).
Cada elemento de la lista de files es un File , que es un objeto (no una cadena) que tiene una propiedad .name .
Para obtener más información, consulte Obtener información sobre archivos seleccionados de MDN.
En React, puede obtener esta información del argumento del evento que se proporciona al controlador onChange . Creo que generalmente es mejor que usar una referencia, porque refleja el patrón que usarías con otros tipos de entradas.
Creo que la razón por la que su código está fallando es porque no está administrando bien sus datos.
Creo que quieres algo como esto:
let [ filename, setFilename ] = React.useState<string>('') function onChangeFile( event: React.ChangeEvent<HTMLInputElement> ): boolean { if(event.files && event.files.length) { setFilename(event.files[0].name) } return true } <FormField label="file" fieldId={`${fieldRoot}.kubeConfig`} > {({form}: FieldProps) => ( <> <input type="text" value={filename} /> <input type="file" style={{display: 'none'}} accept=".pem" ref={inputRef} onChange={onChangeFile} /> <button onClick={handleUploadClick}> Upload </button> </> )} </FormField>Algunas cosas a tener en cuenta:
- no necesitamos dos funciones para esto (una para almacenar y otra para recuperar), solo necesitamos un controlador de cambios
- usamos el estado React normal para mantener el nombre del archivo, en lugar de lo que esté haciendo con lodash
get - esto no usa
form.setFieldValue; No veo la implementación de<FormField>aquí, por lo que no hay forma de que sepamos cómo usarlo correctamente. - No veo la implementación de
handleUploadClick, así que supongo que todo lo que hace es activar un evento de clic en la entrada del archivo oculto (que es bastante común)
Además, nunca debe definir los controladores de eventos DOM como async . Los controladores de eventos DOM no entienden las promesas. Un controlador de eventos DOM debe devolver un booleano, no un booleano dentro de una Promesa, si desea que la página reaccione correctamente.
0
tal vez puedas usar esto
var fu1 = document.getElementById("FileUpload1"); alert("You selected " + fu1.value);