Application Builder - File Input element

The File Input element creates a drag-and-drop zone or selection button for file uploads. It is designed to work with File fields in your Baserow database, enabling workflows like submitting resumes, uploading receipts, or updating profile pictures.

This page covers how to allow users to upload images, documents, and media to your database.

Overview

The File Input element is particularly useful when combined with workflow actions to create or update rows in your database, with the uploaded files stored in “File” type fields.

  • Function: Captures files from the user’s device.
  • Constraints: You can limit uploads by File Type (e.g., .pdf only) and Max Size.
  • Storage: Files are not saved immediately; they are staged until a Button Action (Create/Update Row) submits them to the database.
  • Styling: Visuals for the input box and label are managed via Theme Overrides.

Add a file input

  1. Open the Elements panel (click the + icon).
  2. Select File Input.
  3. Drag and drop the element onto your canvas.

Configuration

Click the element to open the General properties tab.

1. General Settings

  • Label: Descriptive text above the input (e.g., “Upload Resume”).
  • Help text: Instructions displayed inside the drop zone (e.g., “PDFs only, max 5MB”).
  • Required: If checked, the user cannot submit the associated form/action without uploading a file.
  • Multiple files: Toggle this to allow uploading more than one file at a time.
  • Preview images: If enabled, image files will show a thumbnail preview after selection instead of just the filename.

2. Constraints (Validation)

Control what users are allowed to upload.

  • Allowed file types: Define specific extensions (one per line).
    • Examples: jpg, png, pdf.
    • Wildcards: image/* (all images), video/* (all video), audio/* (all audio).
    • Empty: Leave blank to allow all file types.
  • Maximum file size: Set a limit in MB (e.g., 10) to prevent large uploads.

3. Initial Values (Pre-fill)

Use these settings when building an “Edit” form where a file might already exist.

  • Initial file URL: Bind this to a Data Source (e.g., Current Record > Profile Picture) to show the existing file.
  • Initial file name: Bind this to the filename from your data source so the user sees the correct name.

Styling and Theme Overrides

By default, the input inherits styles from your Global Theme. To customize it, use Theme Overrides.

  1. In the General tab, click the Style/Settings icon (slider icon) next to the Label or Input sections.
  2. This opens the styling menu with two tabs:

Input Tab (The Box)

  • Background: Color of the drop zone.
  • Border: Color, width, and radius of the upload box.
  • Padding: Spacing inside the drop zone.

Typography Tab (The Text)

  • Font: Style the Label and Help Text (Family, Size, Weight, Color).
  • Alignment: Left, Center, or Right align the text.

How to save uploaded files

The File Input element does not save files automatically. You must connect it to a workflow.

  1. Add a Button element below the File Input.
  2. Go to the Button’s Events tab.
  3. Add an action: Create Row or Update Row.
  4. In the action settings, map your database’s File Field to the File Input element’s value.

Note: When the user clicks the button, the file is uploaded to Baserow storage and linked to the new/updated row.

Frequently asked questions (FAQ)

Can I rename files upon upload?

No. The file is saved with its original name from the user’s device. To rename it, you would need to use an external automation (e.g., Make/Zapier) triggered after the row is created.

What happens if I verify “Multiple files” but the database field is single?

The database field configuration takes precedence. If your Baserow database field is not set to accept multiple files, only the first file might be saved, or the action may fail. Ensure your database structure matches your frontend constraints.

Is there a storage limit?

Yes. The total storage depends on your Baserow plan limits. The “Maximum file size” setting in the element is a frontend restriction you set for your users, but the system-wide limit still applies.

Related content

Still need help? If you’re looking for something else, please feel free to make recommendations or ask us questions; we’re ready to assist you.