Why no ImageInput component in Web-App - only FileInput

Hi all,

I am prototyping a web app (NOT: mobile app -> decided to move away from it) where a Image Upload / Capturing feature is needed - so if used on a mobile phone, when clicking the "upload file button" it is desired that the Android native Use Camera/Select File dialog shows.

However only direct file selection is offered. I am now confused whether I am missing something - how can I achieve that I can directly take a picture with the device camera? This should make no big difference or does it?

There are so many components available - why would a Image/Cameria input be missing? So I am hoping that I just miss the obvious :slight_smile:

If indeed not available, Is there a way to hack this feature into the fileInput component on my own?

Cheers and many thanks for help.

Hi @myndeu,

To restrict file selection to specific types (e.g., JPG, PNG, etc.) using the File Input component in Retool, you can configure it directly from the Inspector panel:

:wrench: Steps:

  • Select the File Input component.
  • In the Inspector panel, locate the File Types field.
  • Enter the types you want to allow.

This setting ensures that when a user taps the File Input on a mobile device (like Android), the native file picker will only show compatible files.

:iphone: Example Behavior:

  • If no image is selected yet, a default placeholder image is shown in the Image component.
  • Once the user selects a file, the chosen image is displayed in the Image component.

Here are a few sample screenshots demonstrating the flow:

  1. File Types Configuration in Inspector:
  2. Native Android file picker showing only image files:
  3. Image component preview after file selection: