Skip to main content

Multi-File Uploader

Introduction​

Multi-File Uploader for Bubble Mobile. Preview files before uploading.

Features​

Multi-file selection - Pick multiple documents, images, and files at once.

Preview files before uploading to bubble database.

Real-time progress - Visual progress bars with percentage tracking for each file.

File type restriction - Control what users are able to upload.

Smart file validation - Automatic file size and type validation with error handling.

Batch operations - Upload all files simultaneously with individual progress tracking.

Configurable limits - Set maximum file count and total size limits with visual feedback.

Customizable styling - Accent colors, button text, and visual indicators.

File management - Remove individual files or clear all with reset button.

Language support - Customize all UI texts to preferred language.

Fast Events triggers and state publishing.

Color Mode - Toggle Light and Dark Mode.

How to use​

  1. Drop element on view
  2. Add upload endpoint
  3. Use the "Select files" action to select files
  4. Access to states like, Upload urls, file count etc.

Element Fields​

  • Upload endpoint: The Bubble API endpoint for uploading files to your database.

    Test:

    https://app-id.bubbleapps.io/version-test/fileupload

    Live:

    https://app-id.bubbleapps.io/version-live/fileupload

    Replace "app-id" with your actual Bubble app ID.

  • Max size (MB): The maximum total size for all files in MB. Example: 10 (limits total to 10MB)

  • Max files: The maximum number of files that can be selected. Example: 5 (allows up to 5 files)

  • Allowed file types: Comma-separated list of allowed file extensions. Example: pdf,docx,jpg,png

  • Language: The language code for UI text localization. Example: en (English), es (Spanish)

  • Button text: Custom text for the upload button. Example: "Upload Files"

  • Error text: Custom text for error messages. Example: "Upload failed - please try again"

  • File count: Whether to display the file count in the UI. Set to yes/no

  • Total: Whether to display the total file size in the UI. Set to yes/no

  • Clear: Custom text for the clear selection button. Example: "Clear All"

  • File restriction: Enable or disable file type and size restrictions. Set to yes/no

  • Add files button: Custom text for the add files button. Example: "Add Files"

  • Add photos button: Custom text for the add photos button. Example: "Add Photos"

  • Color mode: The theme mode for the uploader. Options: Light or Dark

  • Accent color: Accent color for buttons and highlights. Example: #FF6B35 (orange)

Exposed States​

  • Selection count: The number of selected files
  • Uploaded URLS: The list of uploaded file URLs

Events​

  • Upload is completed: This event fires when the upload is completed
  • Error occurred: This event fires when an error occurs

Actions​

  • Select files: Opens the file selector
  • Pull up selection: Pulls up the selection sheet
  • Select photos: Opens the photo selector

Editor | Preview