Demo to preview the settings
Introduction
The Files Pro - Multi File Uploader plugin is designed for enhancing the file uploading process on Bubble applications. With this plugin, users can easily upload multiple files simultaneously, optimizing their productivity and efficiency.
This plugin offers a seamless and user-friendly interface, simplifying the task of uploading files for both developers and end-users. The multi-upload feature allows users to select multiple files from their local devices all at once, eliminating the need for time-consuming individual selections.
To ensure a smooth upload process, the plugin supports multiple file types such as images, videos, documents, and audio files. This versatility enables users to upload a wide range of media formats to meet their specific application requirements.
The Files Pro - Multi File Uploader plugin also includes powerful customization options, allowing developers to tailor the upload process to suit their application’s branding and design. Developers can customize the appearance and layout of the file upload interface, maintaining a consistent and visually appealing user experience throughout their application.
Additionally, this plugin provides developers with the flexibility to define maximum file sizes and set file type restrictions, ensuring the security and integrity of their applications.
With its extensive features and customization capabilities, the Advanced Multi-Uploader plugin empowers Bubble users to streamline their file upload process, saving time and enhancing the overall user experience.
Features:
📁 Simple and intuitive file uploading process.
🌐 Supports uploading multiple files at once.
📷 Allows users to upload images directly from their device.
📂 Supports uploading files from cloud storage platforms like Google Drive and Dropbox.
⏱️ Enables progress tracking and displays upload progress to users.
💼 Provides reliable error handling and notifies users of any upload failures.
💾 Allows users to easily manage and delete uploaded files.
🔄 Supports retrieving and displaying uploaded files in the app.
🎯 Helps optimize app performance by efficiently handling file uploads.
Prerequisites
You must have a Uploadcare/Filestack/DigitalOcean or Azure developer account to use the plugin and upload to these buckets by accessing:
- For Uploadcare - https://uploadcare.com/
- For Filestack - https://www.filestack.com/
- For Azure - https://azure.microsoft.com/en-us/
- For DigitalOcean - https://cloud.digitalocean.com
Note: Check pricing details for available plans for respective services in order to use them.
How to setup
I. Getting the Plugin keys (if you have chosen one of the above services)
Uploadcare
Filestack
Azure
DigitalOcean
II. Setting up the Plugin on the Bubble side with keys
1. Place the Uploader element on a page
2. Provide keys/storage name for respective service (if any)
3. Start uploading to the respective service.
Plugin Element Proprieties
The plugin contains the Uploader visual element which should be used on a page.
Title | Description | Type |
Server configuration 🛠️ | ||
Server | Bubble AWS, Uploadcare, Filestack, Azure, DigitalOcean. When a server different from Bubble is used, it requires a Service key obtained from the Service provider. | Dropdown |
Attach to | This only works for Bubble's internal AWS storage. If the thing is not valid, it will return an error. | Any Thing (optional) |
Filestack KEY | Filestack key (optional). | Text (optional) |
Azure Storage Account | Azure storage account name (optional). | Text (optional) |
Azure SAS | Shared Access Signature for Azure Blob Storage(optional). | Text (optional) |
Azure Container Name | Name of the Azure Blob Storage container. | Text (optional) |
DO Spaces Region | Region of the digital ocean space (e.g. nyc3, nyc1, fra1, etc..,) | Text (optional) |
DO Spaces Access Key | Digital Ocean spaces access key - from the api section | Text (optional) |
DO Spaces Secret Key | Digital Ocean spaces secret key - from the api section | Text (optional) |
DO Spaces Name | The name of your space (bucket) in Digital Ocean | Text (optional) |
DO Is File Private? | Should the uploaded file be private or publicly accessible? | Checkbox (yes/no) (optional) |
Core properties 📐 | ||
Allow FileSize Validation | Enable or disable file size validation. | Checkbox (yes/no) |
Allow Image Preview | Enable or disable preview mode. | Checkbox (yes/no) |
Allow Image Validate Size | Enable or disable image size validation. | Checkbox (yes/no) |
Allow Image Crop | Enable or disable image cropping. If disabled other proprieties related to cropping will not work | Checkbox (yes/no) |
Allow Image Resize | Enable or disable image resizing | Checkbox (yes/no) |
Allow Remove | When set to false the remove button is hidden and disabled. | Checkbox (yes/no) |
Allow Process | Enable or disable the process button. | Checkbox (yes/no) |
Allow Multiple | Enable or disable adding multiple files. | Checkbox (yes/no) |
Allow Image Transform | Boolean that allows image transformation (e.g., cropping, resizing). | Checkbox (yes/no) |
Image quality | The quality of the output image supplied as a value between 0 and 100. Where 100 is best quality and 0 is worst. When not supplied it will use the browser default quality which averages around 94. | Number (optional) |
Max Files | Maximum number of files. | Number |
Accepted File Extensions | File extensions - Enter extensions for validation | Text |
Blocked file extensions | Ex: .png, .jpg, .pdf (only extensions) | Text (optional) |
File Size (KB/MB) | The maximum size of a file for example 100MB or 100KB. | Text (optional) |
Total File Size (KB/MB) | Maximum size of all files in the list, same format as File Size | Text (optional) |
File Validate Type Label | Message is shown to indicate the allowed file types. | Text (optional) |
MinWidth | The minimum image width | Number (optional) |
MaxWidth | The maximum image width | Number (optional) |
MinHeight | The minimum image height | Number (optional) |
MaxHeight | The maximum image height | Number (optional) |
Image Resize TargetHeight | The output height in pixels | Number (optional) |
Image Resize TargetWidth | The output width in pixels | Number (optional) |
Image Crop AspectRatio | The aspect ratio of the crop in human-readable format, for example:'1:1' or '16:10' | Text (optional) |
Clear after uploading | Clear the input value after upload | Checkbox (yes/no) |
Image Resize Mode | The method by which the images are resized. Choose between ' force', 'cover', or 'contain'. Force will ignore the image aspect ratio. The cover will respect the aspect ratio and will scale to fill the target dimensions. Contain also respects the aspect ratio and will fit the image inside the set dimensions. All three settings will upscale images when there are smaller than the given target dimensions | Dropdown |
Image Resize Upscale | Set to false to prevent upscaling of images smaller than the target size | Checkbox (yes/no) |
Instant Upload | Immediately upload new files to the server. | Checkbox (yes/no) |
Allow Undo button | Enable or disable the revert processing button | Checkbox (yes/no) |
Set text for labels 🏷️ | ||
Uploader text | Write the text that will be displayed in the element. | Text |
Fixed uploader text to top | If it is checked, the “Uplaoder text” will be on the top of element every time. | Checkbox (yes/no) |
Fixed uploader text background color | This color is used to differentiate the “Uploader text” when this is fixed on the top. | Color |
Label FileType Not Allowed | A Message is shown when an invalid file is added. | Text (optional) |
Label FileSize Exceeded | Status message shown when a large file is dropped. | Text (optional) |
Label Max FileSize | Detail message shown when max file size was exceeded. {filesize} is replaced with the value of the maxFileSize property. | Text (optional) |
Label FileSize Exceeded | Status message shown when total file size exceeds maximum. | Text (optional) |
Label Total FileSize | A detail message is shown when the total file size exceeds the maximum. | Text (optional) |
Label Image Size TooSmall | The message is shown when the image is too small. | Text (optional) |
Label Image Size TooBig | he message is shown when the image is too big. | Text (optional) |
Label Image MinSize | Message is shown to indicate the minimum image size. | Text (optional) |
Label Image MaxSize | Message is shown to indicate the maximum image size | Text (optional) |
Use custom language | Boolean that allows the use of custom language definitions. | Checkbox (yes/no) |
Custom language definition | JSON string containing custom language definitions. | Text |
PrePopulatedListOfFiles | A list of file locations that should be loaded Immediately | Text (optional) |
Style setting 🪄 | ||
Grid Layout | it can render items in a grid | Checkbox (yes/no) |
File padding | Padding around each file in the grid layout. | Number |
Upload Success Background | Success message Background color | Color |
Upload Error Background | Error message Background color | Color |
Preview Min Height | Minimum image preview height | Number |
Preview Max Height | Maximum image preview height | Number |
Preview Height | Fixed image preview height, overrides min and max preview height | Number (optional) |
Preview Width | Fixed image preview width | Number (optional) |
Element Actions
- Start upload - Automatically starts uploading the file
- Reset file uploader - Cleans the input of all files
- Remove files from Azure - Delete files from your Azure account
Title | Description | Type |
File name | The name of the file that you want to remove from your Azure container. EX: MyFile.png | Text |
Element Events
Title | Description |
File is uploaded | This event will let you know that the file has been uploaded |
All files uploaded | This event shows that all files pending or uploaded has loaded |
error occurred | Triggered when an error occurs |
Upload is started | Triggered when an upload starts |
Remove file from file uploader | Triggered when a file is removed |
Element States
The plugin returns the following states:
Title | Description | Type |
FileName | The name of the uploaded file | Text |
File | URL of the uploaded file | File |
Base64 | Here is a file encoded in base64 that will be returned | Text |
UUID/Handle/MD5 | A 128-bit number used to identify information in computer systems. | Text |
Max Files | Returns yes/no value for when max files are in the element | yes/no |
File Size | The uploaded file size in KB | Number |
All files url | All uploaded files URL’s | Text |
All files uploaded | state that shows that all files have been uploaded | yes/no |
Images height | List of images heights | Number |
Images width | List of images widths | Number |
Uploader Is Empty | The element has nothing waiting to be loaded. | yes/no |
Upload Percent | The percentage of file uploads on the server. | Number |
Total files uploaded | The total number of uploaded files | Number |
Total files error | The total number of files that throw errors when loading. | Number |
List of File Sizes | A list with the size of all files. | Number |
Last image width | The width of the last loaded image | Number |
Last image height | The height of the last loaded image. | Number |
Progress for current file | the loading progress of the current file. | Number |
Error message | The error message that is available after “error occurred” event. | Text |
List of file mime types | A list of mime types of all files | Text |
Last image’s mime type | the mime type of the last loaded image. | Text |
Url For Delete | URL of the file removed from the uploader | Text |
All files name | List of all uploaded files names | Text |
Workflow example
In this workflow, we will show you how to save a thing in the database using default bubble actions and plugin event
- On the Uploader element, all files uploaded event
2. Add a step to create an object, by providing the Uploader's File exposed element state and save the value to a field (file)
3. The file will be saved in Bubble's Data field with respective %name% in table
Things to Note
IMPORTANT: Default Bubble picture uploader will not work on the same page if you are using this multi-uploader, & IE is not supported.
