Input File / Plugins: Default behavior on mobile

Ionic Framework
1

Hello,

I noticed that a click on a simple file input <input type=“file” #upload /> to pick a file allows the opening of this menu (on iOS):

IMG_0927
IMG_09271170×455 45.6 KB

To my surprise the options “Photo Library” and “Choose Files” works perfectly without additional plugins:

  • Photo Library allows me to select one or more photos in my gallery, to choose the size (real or compressed). And when my selection is done, my input change event got a javascript object File.
  • Choose Files allows me to select one file from the iOS File app, and it also works perfectly.

At this stage, Take Photo or Video crashes my app because I didn’t install the Camera plugin and/or set the NS Privacy strings in the PLIST file.

My question is: So without a plugin it’s possible to do this, is there a way to use the exact same function/behavior from another button for example?

Because I installed the @capacitor/camera and cordova-plugin-chooser plugins (using the camera works perfectly) but:

  • The result is a dataURI that I have to convert to Blob then to File (I need to display a file preview and upload them) - it takes time while with the selection via the input the display is instantaneous
  • I don’t have the possibility to choose the real or compressed size when I select photos from my gallery with this plugin
  • Some files aren’t managed by the cordova-plugin-chooser plugin while with the “Choose Files” option I have no problem and the selection of any file works

I hope my explanation and my request is clear to understand.

Thanks!

I’m using Ionic V6 (but I remember the same behavior on the previous version 5).

2

I stumbled across this because my ionic app crashes by default when using ''take photo."

Did you end up doing what you wanted? I’ve done hidden input type=file buttons before or re-styling them to look like what you want (though not in ionic yet), sounds like that’s what you were looking for?