Floating Action Button as Input type="file"

Ionic Framework ionic-v3
1

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">

Screenshot%20(27%20giu%202019%2011_50_09)
Screenshot (27 giu 2019 11_50_09).png1080×2280 178 KB

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

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

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

2

hiii

you have to use this cordova plugin

3

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

there’s no way to make it without plugins?

4

IONIC IS MALTIPLATFORM APP

same plugin can be used for ios or windows

5

nope… reading documentation, it says

Supported platforms

  • Android
6

SOLVED!

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

page.scss
.hideInput{
    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