alessandro gaboardi alessandro gaboardi - 28 days ago 6
iOS Question

Polymer click re-route on iOS

I'm using a hidden

<input id="mfile" type="file" accept="image/*">

and triggering it with a paper-fab from google's element catalog. It works everywhere except for safari on iOS, the click fires but it doesn't get redirected to the input.

By redirect i mean a on-tap listener on the fab that triggers
this.$.mfile.click();


Any suggestion or workaround?

Answer

Thanks to @marx_tseng from polymer slack, here is the solution: https://polymer.slack.com/archives/general/p1478229319019481

<paper-fab id="fileFab" label="File" on-tap="_pickFile"></paper-fab>
<input type="file" id="filePicker" hidden />

...

_pickFile: function(e) {
    e.preventDefault();
    this.$.fileFab.blur();

    // cancelable is true, not work on ios simulator
    // this.$.filePicker.click();

    // default cancelable is false, work on ios simulator
    try {
        // fixes mobile safari
        var evt = new MouseEvent("click");
        this.$.filePicker.dispatchEvent(evt);
    } catch (e) {
        // fallback for IE11
        this.$.filePicker.click();
    }

}
Comments