Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.brikl.co/llms.txt

Use this file to discover all available pages before exploring further.

File Uploader 01

Overview

File Uploader 01 is a Bubble.io UI component that allows users to upload image files through a styled button interface. It displays a live preview of the uploaded image, dynamically changes the button label from ‘Upload image’ to ‘Change image’ once a file is selected, shows the filename, and provides a ‘Remove’ button to clear the selection. The component handles all states visually including hover, disabled, and file-selected states.

How to use

1

Open the Brikl panel

Navigate to the Elements category in the Brikl panel.
2

Copy the component

Find File Uploader 01 and click Copy.
3

Paste into your editor

Paste it into your Bubble canvas with Cmd + V (Mac) or Ctrl + V (Windows), or right-click on the canvas and select Paste.

States

This component includes conditional states that automatically change its appearance.
StateTriggerVisual effect
File Selected – Preview VisibleFileUploader 01 value is not emptyThe preview group displays the uploaded image as a background, the icon inside preview is hidden, and the upload button label changes to ‘Change image’
File Empty – Remove Group HiddenFileUploader 01 value is emptyThe remove button and filename group are hidden from view
File Selected – Remove Group VisibleFileUploader 01 value is not emptyThe group containing the Remove button and filename becomes visible
File Uploader HoveredFileUploader 01 is hoveredThe upload button opacity increases to 90
File Uploader Not ClickableFileUploader 01 is not clickableThe upload button opacity reduces to 50, indicating a disabled state
Remove Button HoveredRemove button is hoveredUnderline appears on the Remove button text
These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor.

Responsive

This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble’s built-in mobile breakpoint.

Workflows

This component includes pre-built workflows.
TriggerAction
BT - Remove (FU 01) is clickedResets the group GP - BT File Uploader 01, clearing the file input and reverting the component to its empty state
These workflows are included when you use the Copy with Workflows option in the Brikl panel.

Requirements

LicenseStarter plan required
PluginsNone
Custom codeNot required

Platforms

PlatformSupported
Web
Mobile

License

This component requires a Starter plan.