Angular IE11 file upload Cancel event

Question

We have an application where we need to support IE11 with file upload functionality. The version of angular is Angular 11.

There is file upload control, which is working fine in all browsers except IE11 where we are having issue with Cancel button of file dialog box.

<input #fileUploadCtrl class="form-control" type="file" (change)="onFileChange($event)" 

Basically when user clicks on "Cancel" button, file selected already must be cleared from input control. Change event is working only if the user selects a file and click on "Open" button. However change event is not triggering when clicking on "Cancel" button.

How we can capture "Cancel" event and clear the file input control in Angular"? If not is there any workaround for clearing the file upload when user click on "Cancel" button?

Answer 1

Just like myjscoffee's comment, the cancel event can't be detected. The file <input> in IE 11 is readonly so you can't clear it like what you think. It's by design in IE. You can also refer to this thread .

The only way you can clear the input file in IE is that adding a reset <button> and when you click the button, clear the file <input> . You can refer to the following code snippet:

app.component.html:

<input #fileUploadCtrl type="file">
<button type="button" (click)="reset(fileUploadCtrl)">Reset</button>

app.component.ts:

reset(element) {
    element.value = "";
}