Floating Action Button as Input type="file"

Hi everyone,
i’m developing an app and i want this layout:

Audio List (expandable)
Video List (expandable)
Image List (expandable)

FAB at the bottom -> if pressed i need to open a “file manager” like <input type="file">

i tried to put the <input> component in fab component, but this is the result.

<ion-fab vertical="bottom" horizontal="center" slot="fixed">
      <ion-input type="file">
      <ion-icon name="add"></ion-icon>

how can i do? i’d like to not use plugins (if possible)
can i add the <input type="file"> functionality to a FAB?

thanks for the help


you have to use this cordova plugin

thanks @Rishab24
i need a multiplatform app.
what can i use for ios?

there’s no way to make it without plugins?


same plugin can be used for ios or windows

nope… reading documentation, it says

Supported platforms

  • Android


<ion-fab vertical="bottom" horizontal="center" slot="fixed" >
      <label for="input" style="font-size: 20pt; padding: 30px">
      <input id="input" type="file" class="hideInput" (change)="changeListener($event)">
    position: absolute;
    bottom: -100000000px;

What i’ve done?
i put an input (STANDARD, not ion-input) that is not visible, and a label (STANDARD, not ion-label) that has
for = “id-of-input

i expanded the padding of label in order to increase the “tabbable area” of the component