QUICK START Add Advanced File Uploader to a page and size/style it like any other Bubble element.


By default, users can:

✦ click the dropzone to browse
✦ drag files onto it
✦ upload multiple files

Use Allow Multiple Files to switch between single and multi-file selection.

A Maximum Number of Files value of 0 means no additional plugin-side maximum.

Individual and total file-size limits set to 0 are treated as unrestricted by the plugin. Bubble/platform limits may still apply.



FILE TYPES

Leave Allow Any File Type enabled to accept any file supported by Bubble.

To restrict uploads:

✦ disable Allow Any File Type
✦ enable any combination of Images, Documents, Audio and Video
✦ optionally add extra extensions in Allowed File Extensions

Files are validated before upload.


The plugin can reject:

✦ unsupported file types
✦ files over your individual size limit
✦ files that would exceed the total upload-size limit
✦ duplicate local selections
✦ zero-byte files

Rejected files remain available in the uploader’s exposed item lists with their status and rejection message.



BUILDING ONE CUSTOM FILE LIST

Advanced File Uploader does not force an uploaded-file list into a page's design.

Instead, every file is exposed through a stable Upload Item ID from the moment it is added.

This means one Bubble Repeating Group can contain:

✦ queued
✦ uploading
✦ uploaded
✦ failed
✦ rejected

Set the Repeating Group:

Type of content:
text

Data source:
Uploader's Upload Item IDs

All parallel file states are aligned by index.

Inside each RG cell, use Current cell's index to retrieve the corresponding value.

Examples:

Uploader's File Names:item # Current cell's index

Uploader's File Sizes Formatted:item # Current cell's index

Uploader's File Extensions:item # Current cell's index

Uploader's File Categories:item # Current cell's index

Uploader's File Statuses:item # Current cell's index

Uploader's File Progress:item # Current cell's index

Uploader's File Type Icons:item # Current cell's index

Uploader's File Messages:item # Current cell's index

Uploader's File URLs:item # Current cell's index

Each of these values refers to the same upload item at that index.

This lets you create one completely custom file-management interface without moving files between separate Bubble lists or custom states.



FILE STATUS VALUES

File Statuses contain:

✦  queued
✦  uploading
✦  uploaded
✦  failed
✦  rejected

Use these values in Bubble conditions to show the appropriate controls or styling for each item.

For example:

✦ show a progress bar while status is uploading
✦ show Retry when status is failed
✦ show an error message when status is rejected
✦ show a success indicator when status is uploaded



PROGRESS

File Progress exposes the progress of each upload item from 0–100.

Use this value to build custom:

✦ progress bars
✦ percentage labels
✦ loading indicators
✦ conditional animations

Overall Progress exposes byte-weighted progress for the current upload batch.

The uploader also includes an optional built-in dropzone progress display.

Disabling the built-in progress UI does not disable the exposed progress states.



REMOVE ITEMS

To remove an item using your own Bubble button or icon:

Run:
Remove Upload Item

Pass:
the relevant Upload Item ID

Inside an RG this will usually be:

Current cell's text

or the corresponding value from Upload Item IDs.

Active uploads cannot currently be removed while the upload request itself is in progress.



RETRY FAILED UPLOADS

To retry a failed item:

Run:
Retry Upload Item

Pass:
the failed item's Upload Item ID

The item will return to the queue and attempt to upload again.

Retry is intended for files with a File Status of failed.



OPEN THE FILE PICKER

Use the Open File Picker action to open the uploader from your own Bubble button, icon or workflow.

This is useful if you want the visible dropzone itself to be minimal or non-clickable.



CLEAR THE UPLOADER

Use Clear Uploader to remove the items currently held by the uploader where safe to do so.

Uploads already in progress are protected from being cleared until their active request has completed.



PRIVATE FILES

Enable Make Files Private to use Bubble's private-file upload handling.

For private uploads:

✦ Enable Make Files Private
✦ Select the relevant Bubble data type in Private File Attachment Type
✦ Provide the Bubble Thing in Attach Private Files To

The uploaded file is then attached to that Thing through Bubble's file system.

Private-file access is ultimately controlled by the individual Bubble app and its Privacy Rules.

Advanced File Uploader exposes:

Has Configuration Error
Configuration Error

These states help identify incomplete private-upload configuration.

A Configuration Error event is also available for workflows.



INITIAL / EXISTING FILES

Use Initial Files when an uploader should include files that already exist.

This is useful for edit forms and existing database records.

Initial files are added to the same exposed collection as newly uploaded files, so they can appear inside the same custom Repeating Group.

Because the browser does not provide the original local file size for an existing URL, some metadata may only be available for newly selected files.


IMAGE PREVIEWS

Image Previews exposes a preview image for each upload item when the file is an image. The list is index-aligned with Upload Item IDs and the other file metadata states.

For newly selected images, the preview is available immediately, before upload completes. For uploaded or initial image files, the uploaded file URL is used.

A common RG setup is:

use Image Previews:item # Current cell's index for image files
use File Type Icons:item # Current cell's index for non-image files

The preview is suitable for both small thumbnails and larger image displays; the Bubble Image element controls cropping, aspect ratio and display size.


UPLOAD EVENTS

The plugin provides workflow events for:

✦ Files Added
✦ Upload Started
✦ File Uploaded
✦ Upload Failed
✦ File Rejected
✦ Upload Queue Finished
✦ Configuration Error

Use these events when the app needs to react to upload activity, update database records or trigger additional workflows.



MULTIPLE UPLOAD BATCHES

Allow Multiple Upload Batches controls whether users can add more files after a previous selection.

When enabled, new accepted files are added to the uploader's existing collection.

This is useful for interfaces where users may build up a larger group of attachments over time.



DUPLICATE HANDLING

When Prevent Duplicate Files is enabled, the uploader prevents the same local file from being added repeatedly.

Duplicate detection uses the local file's identifying browser metadata such as filename, size and last-modified value.

This prevents common accidental double-selection behaviour before upload.



GENERATED FILE TYPE ICONS

File Type Icons exposes a generated icon for each upload item.

Common formats receive recognisable file-specific icons, while less common files fall back to broader file categories.

File Type Icon Style lets you choose between:

✦ familiar file-type colours
✦ one custom brand colour

You can use these icons inside a Bubble Image element in a custom RG, or ignore them entirely and provide your own UI.



STYLING THE DROPZONE

The dropzone supports configurable:

✦ primary text
✦ drag-over text
✦ upload icon
✦ custom upload icon
✦ icon size and opacity
✦ automatic or custom guidance
✦ alignment and spacing
✦ progress display
✦ drag-over background
✦ drag-over border
✦ drag-over icon scale
✦ transition duration

The element itself also supports Bubble styling such as background, border, padding, shadow and font styling.

The plugin is intentionally designed so the upload engine and the visual interface remain separate.

Use as much or as little of the built-in UI as you need.



A GOOD DEFAULT BUILD

For a polished custom uploader:

✦ Add Advanced File Uploader as a dropzone.
✦ Create one Repeating Group using Upload Item IDs (text).
✦ Use the aligned file states to populate each cell.
✦ Add conditional progress, Retry and Remove controls based on File Statuses.
✦ Style everything with normal Bubble elements.

The uploader handles the upload lifecycle. The app maintains full control around how that lifecycle looks.