html5 input setvalue,javascript - failed to set the 'value' property on 'HTMLInputElement' in reacti...

For security reasons, it's possible to set programmatically only an empty string to a file input value to clear the selection. If you set a value to input with type file, you'll get an error like:

ERROR DOMException: Failed to set the 'value' property on 'HTMLInputElement':

This input element accepts a filename, which may only be programmatically set

to the empty string.

As a workaround for modern browsers, DataTransfer might be used for changing file input value:

HTML (based on stackblitz):

Change File Name

Component:

changeFileName() {

const dataTransfer = new ClipboardEvent('').clipboardData || new DataTransfer();

dataTransfer.items.add(new File(['my-file'], 'new-file-name'));

const inputElement: HTMLInputElement = document.getElementById('my-input') as HTMLInputElement

inputElement.files = dataTransfer.files;

}