I have an angular application with a component with a file input like so:
<input #fileInput type="file" (change)="uploadFile($event)" />
The component is shared across multiple parts of the application. In almost all circumstances, this works exactly as expected. However, on one page of my application when using the app in an iframe
in a WkWebView
in the Salesforce iOS app, the change
event does not fire if the user goes through the iOS “Take Photo or Video” workflow that is part of the iOS implementation of file inputs. Other pages in the application can use the input just fine; other iOS apps can iframe the site and use this page just fine; using an option other than “Take Photo or Video” works just fine.
What is extra strange, is that if I attach a change
event to the element natively, bypassing Angular, it works just fine:
@ViewChild('fileInput', { static: true }) fileInput: ElementRef;
ngAfterViewInit() {
this.fileInput.nativeElement.addEventListener('change', this.uploadFile);
}
Something about this extremely narrowly specific confluence of factors causes the bug. After days of pouring over this and trying to locate the root cause, I am out of ideas. What might plausibly interfere with a change
event firing?
Incidentally, I have tried the tricks to null
out the input value, as suggested in answers like this one. It does not help here.