En una aplicación React/Typescript tengo un componente que acepta un archivo:

 <div> <input type="file" {...register('avatar')} /> </div>

junto con 2 valores de cadena. Todos estos valores se guardan en FormData :

 type FormData = { handle: string; role: string; avatar: File; }; const { register, handleSubmit, formState: { errors }, } = useForm<FormData>();

Me gustaría acceder al nombre del archivo de avatar para usarlo más adelante, así como enviar el archivo a un depósito de AWS como este:

 const onSubmit = (data: FormData) => { console.log(data); console.log(data.avatar.name); ReactS3Client.uploadFile(data.avatar, data.handle + Date.now()) .then((data) => console.log(data)) .catch((err) => console.error(err));

Hay algunos problemas sucediendo aquí. En primer lugar, cuando entro en console.log avatar.name, simplemente está en blanco. En una de mis pruebas, el archivo era Player.jpg, así que esperaba que registrara "Player". Luego, cuando verifico mi depósito de AWS, el archivo se cargó, pero cuando intento abrirlo, no veo una imagen y en su lugar veo: [object FileList .

Obviamente, en algún momento del proceso, estoy interactuando incorrectamente con el archivo cargado. ¿Cómo puedo acceder al nombre del archivo y subirlo correctamente a AWS?

EDITAR:

Si console.log(data.avatar); me da esto:

Si console.log(data.avatar.name); que es una opción de autocompletar en VS Code, entonces simplemente se imprime sin definir.

Si console.log(data.avatar[0].name); Recibo este error: Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'File'. Property '0' does not exist on type 'File'.ts(7053) .

¿Cómo puedo acceder a esa propiedad de nombre?