Trigger input file click in Ionic 4 after page change

Ionic Framework ionic-v3
1

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 page 2 with params, in page two I get the param so I want to automatically trigger the <input file> dialog that I have in page two.

page-two.ts

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

page-two.html

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

I tried with both of these too but no luck:

@ViewChild('file') fileInput:ElementRef;
@ViewChild('file') fileInput:any;
2

I’m still having this issue. My topic in stackoverflow.com

3

What does this mean? Are you using navparams? Your ionViewWillEnter code looks wrong to me, but I don’t know what you are trying to do, so I can’t suggest how to correct it.

4

I’m using navparams, but that doesn’t matter as I can’t achieve to open the file input programmatically .

ionViewDidLoad() {
    if (navParams.data.test == true) { // works
     // Reach here but input file doesnt show up
        document.getElementById('file').click(); // doesn't work
    }
}
5

What do you mean by Ionic 4? And how do you transition from page 1 to page 2?

6

I’m using Ionic 4 version, it’s ionic2 core concept.
I transition with this.navCtrl.push('Page2', {test: true}); This works, it’s the input that doesn’t, forget about the transition between pages as I can open the file input in the same page programmatically

7

I’m so confused. Why don’t you just put the input in your navParams?

8

Do you mean when user push the button [go to page 2] it should be an input? I don’t know how to achieve that and the input file is in page2.html

My objective is very simple, show the native explorer programmatically so the user can select a file. I want to open the dialog of the file input

Example, I want to trigger the button of the input file ‘Click me’.
https://jsfiddle.net/oysbmw5u/

9

Oh I see. You’re going to have to rethink your design. You’re asking for an experimental technology that isn’t supported on mobile.

HTMLDialogElement,show()