Trigger input file click in Ionic 4 after page change

Question

I want to trigger/open a file input coming from another page in Ionic 4.

In page 1 I have a button to go to a modal, in page modal I want to automatically trigger the <input file> dialog

Component

ionViewWillEnter() {
    document.getElementById('file').click(); // Tried with this one 1st, this only works in Internet Explorer / Edge
    this.fileInput.nativeElement.click();    // And also this with @ViewChild
}

HTML

<input type="file" name="file" #file id="file" (change)="fileChange($event)" required>

Answer 1

This is the code I'm using to trigger a click on an < input>-element:

@ViewChild("file") fileInput: ElementRef;

triggerClick() {
    let event = new MouseEvent('click', {bubbles: true});
    this.renderer.invokeElementMethod(this.fileInput.nativeElement, 'dispatchEvent', [event]);
}

Answer 2

Change this:

ionViewWillEnter() {
    document.getElementById('file').click(); // Tried with this one 1st
    this.fileInput.nativeElement.click();    // And also this with @ViewChild
}

To This:

ionViewDidLoad() {
    document.getElementById('file').click(); // Tried with this one 1st
}

Answer 3

Try ngAfterViewInit() Lifecycle hook that is called after a component's view has been fully initialized.

ngAfterViewInit() {
    document.getElementById('file').click();
}