Link to plugin page: https://zeroqode.com/plugin/multi-uploader-1550378962519x766759789228458000
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/Digital Ocean, Bubble 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 Digital Ocean - https://cloud.digitalocean.com
- For Bubble
Note: Check pricing details for available plans for respective services in order to use them.
Tutorial
IMPORTANT: Default Bubble picture uploader will not work on the same page if you are using this multi-uploader, & IE is not supported.
How to setup
UploadCare
Filestack
Azure
Digital Ocean
Bubble
Plugin Element
To set up the plugin for each server, please refer to the instructions above.
The plugin contains the Uploader visual element which should be used on a page.
Title | Description | Type |
Server configuration 🛠️ | ||
Server | Bubble , 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) |
Core properties 📐 | ||
Allow File Size 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) |
Min Width | The minimum image width | Number (optional) |
Max Width | The maximum image width | Number (optional) |
Min Height | The minimum image height | Number (optional) |
Max Height | The maximum image height | Number (optional) |
Image Resize Target Height | The output height in pixels | Number (optional) |
Image Resize Target Width | The output width in pixels | Number (optional) |
Image Crop Aspect Ratio | 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 File Type Not Allowed | A Message is shown when an invalid file is added. | Text (optional) |
Label File Size Exceeded | Status message shown when a large file is dropped. | Text (optional) |
Label Max File Size | Detail message shown when max file size was exceeded. {filesize} is replaced with the value of the maxFileSize property. | Text (optional) |
Label File Size Exceeded | Status message shown when total file size exceeds maximum. | Text (optional) |
Label Total File Size | A detail message is shown when the total file size exceeds the maximum. | Text (optional) |
Label Image Size Too Small | The message is shown when the image is too small. | Text (optional) |
Label Image Size Too Big | he message is shown when the image is too big. | Text (optional) |
Label Image Min Size | Message is shown to indicate the minimum image size. | Text (optional) |
Label Image Max Size | 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 |
PrePopulated List Of Files | 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
Element Events
Element States
Plugin Actions
Workflow example
Tips
