Programmatically display filenames in file input: Implemented using Angular

Question

Good evening,

I'm developing an application using Angular15 and one of the functions is to populate a table with team member data.

To add members, you need to click a button and then display a modal window to fill in the data and add some files. Editing operations are the same.

I have successfully saved the data and uploaded the file to the server folder, but when editing I encountered a problem: in the file input box, the uploaded file name does not display, it looks like no file was uploaded, although It has actually been uploaded.

I store the name of the document in a member property and use ngModel to bind the file input box to the member property.

The input box shows the message "No file selected" and if I try to set the file name programmatically on the input box (I control it using ViewChild and ElementRef in the .ts file), I get the following error:

core.js:1448 ERROR: Uncaught (in promise): InvalidStateError: Cannot set 'value' property on 'HTMLInputElement': This input element accepts a filename, which can only be set to null programmatically String. Error: Unable to set the 'value' attribute of 'HTMLInputElement': This input element accepts a filename, which can only be set programmatically to an empty string.

I completely understand that I can't do this because of the security risks it involves, but I don't want to insert the file programmatically, I just want to display the file name, not its content. Is there any way to achieve this?

Thanks.

Answer 1

In web documentation

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