html - Mostrar nombres de archivos en el input de archivos programáticamente con Angular

Buenas noches,

Estoy desarrollando una aplicación con Angular15, y una de las funciones es llenar una tabla que contiene datos de los miembros de un equipo.

Para agregar un miembro, se hace clic en un botón y se muestra una ventana modal para completar los datos y agregar algunos archivos. Para editar, es la misma operación.

He podido guardar los datos y subir los archivos a una carpeta del servidor, pero al editar estoy teniendo un problema: en los campos de archivo, no aparece el nombre del archivo subido, dando la apariencia de que no se ha subido nada, aunque en realidad sí se ha subido.

Estoy almacenando el nombre del documento en un atributo del miembro, y estoy vinculando la entrada de archivo al atributo del miembro usando ngModel.

El campo de entrada recibe un mensaje de "No se ha seleccionado ningún archivo", y si intento establecer programáticamente el nombre del archivo en el campo de entrada (el cual controlo en el .ts con un ViewChild y ElementRef), obtengo el siguiente error:

core.js:1448 ERROR Error: No capturado (en promesa): InvalidStateError: Error al establecer la propiedad 'value' en 'HTMLInputElement': Este elemento de entrada acepta un nombre de archivo, que solo puede establecerse programáticamente en la cadena vacía. Error: Error al establecer la propiedad 'value' en 'HTMLInputElement': Este elemento de entrada acepta un nombre de archivo, que solo puede establecerse programáticamente en la cadena vacía.

Es totalmente lógico que no pueda realizar esta operación debido al riesgo de seguridad que conlleva, pero no quiero insertar un archivo programáticamente, solo quiero mostrar el nombre, sin su contenido. ¿Hay alguna manera?

Gracias.

Respuesta #1

En documentos web <input type="file">

No se puede establecer el valor de un selector de archivos desde un script; hacer algo como lo siguiente no tiene efecto:

const input = document.querySelector("input[type=file]");
input.value = "foo";