Files Pro - Multi File Uploader

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:
  1. For Uploadcare - https://uploadcare.com/
  1. For Filestack - https://www.filestack.com/
  1. For Azure - https://azure.microsoft.com/en-us/
  1. 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)
Image without caption
3. Start uploading to the respective service.

Plugin Element Proprieties

The plugin contains the Uploader visual element which should be used on a page.
Image without caption
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
Image without caption

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
Image without caption

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
  1. On the Uploader element, all files uploaded event
Image without caption
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)
Image without caption
3. The file will be saved in Bubble's Data field with respective %name% in table
Image without caption

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.

Changelogs

Update: 02/05/2019 –
  • Added new plugin states and element propriety.
  1. Uploader is empty
  1. Image width
  1. Image height
Note: The image height and width states will be triggered only when the file was uploaded and it is an image file type. [MIME TYPES]
Image without caption
New plugin propriety for initialization. The checkbox for Initialize from workflow now can be set. By default, its value is set to True.
Image without caption
Update: 02/03/2020 –
  • Added the action: Remove File From Azure A Uploader
In order to use the action follow our workflow setup:
1. Add the action to the workflow.
Image without caption
2. Select the "Uploader" element that is set to Azure, and write in the "Filename" the name of the file that you want to delete.
Image without caption
Update: 19/01/2021 –
  • Fixed: bug in the “Uploadcare has finished uploading” event performance, with the active “Many files” checkbox. Update name: "Uploadcare has finished uploading".
Update: 27/01/2021 –
  • Fixed the "Instant Upload" bug for a plugin element
Update: 25/02/2021 –
  • Fixed duplicate the Uploader text whenever two Uploader elements are in the same group and replacing text when uploading files
Update: 19/03/2021-
  • Plugin Upgrade.
Update: 23/03/2021 -
  • Fixed the problem with the 's Uploader Is Empty state
Update: 24/03/2021 -
  • Fixed action Start Upload
Update: 21/06/2021, Version 2.46.0 -
  • improve with new states
Update: 03/09/2021, Version: 2.49.0 -
  • fixed the problem with key loading Uploadcare
Update: 15.09.21, Version: 2.50.0
  • Style update
Update: 15.12.21 - Version: 2.51.0
  • Fixed bug with the checkbox "Clear after uploading"
Update: 20.12.21 - Version: 2.52.0
  • Improved "height and width states" for many files.
Update: 16.02.22 - Version 2.53.0
  • Was added two new states.
Update: 7.03.22 - Version 2.54.0
  • Added new state "Progress for current file".
Update: 09.03.22 - Version 2.5.0
  • Fixed state "file size"
Update: 13.05.22 - Version: 2.58.0.
  • fixed problem with the field 'attachment to’
Update: 03.08.22 - Version: 2.61.0
  • updated links in the header
Update: 29.08.22 - Version 2.62.0
  • files validation by extension
Update: 19.10.22 - Version: 2.65.0
  • Change the logic for type validation
Update: 26.10.22 - Version: 2.66.0
  • Added option hover color
Update: 17.11.22 - Version: 2.68.0
  • fixed the problem with validation of the event drag
Update: 21.11.22 - Version: 2.69.0.
  • Improved with new options "Allow Remove" and "Allow Process”
Update: 02.01.23 - Version: 2.72.0.
  • added possibility to work with TIFF files
Update: 03.02.23 - Version: 2.75.0
  • added possibility to customization "font-family" and "font-size”
Update: 09.03.23 - Version: 2.78.0
  • Fixed background style issues
Update: 15.05.23 - Version: 2.79.0
  • Added "error message" state and "error occurred" event
Update: 22.05.23 - Version: 2.80.0
  • Minor fixes
Update: 24.05.23 - Version: 2.81.0
  • Added mime types to the state
Update: 20.06.23 - Version: 2.84.0
  • Added field "Container ID”
💡
The “Container ID” field is used if you want to add the scroll to the group with the plugin element. It can be convenient in cases when you need the plugin drop area fixed height but have too many files for upload.
Image without caption
Update: 1.08.23 - Version: 2.86.0
  • Added fields "Use custom language", "Custom language definition”
Update: 2.08.23 - Version: 2.87.0
  • Minor fixes
Update: 22.08.23 - Version: 2.88.0
  • Was fixed the problem with the file info.
Update: 04.09.23 - Version: 2.90.0
  • Updated description field "File extensions".
Update: 27.09.23 - Version: 2.93.0
  • Fixed "Uploader text". Clikable element area has been expanded.
Update: 13.10.23 - Version: 2.96.0
  • Prevented flickering of the input field
Update: 23.10.23 - Version: 2.98.0
  • Added DigitalOcean as storage provider
Update: 09.11.23 - Version: 2.99.0
  • Fixed wrong file status on Filestack and Adjust element size
Update: 27.11.23 - Version: 2.101.0
  • Added new state - all file names
Update 29.11.23 - Version 2.102.0
  • Added original icon Undo
Update 12.12.23 - Version 2.103.0
  • "Fixed the validation type"
Update 18.12.23 - Version 2.104.0
  • Fix the problem with states "List of File Mime Types" and "Last Image's Mime Type”
Update 06.02.24 - Version 2.111.0
  • Allowed file extensions bug fix
Update 19.03.24 - Version 2.113.0
  • Added new field Blocked file extension to block certain types of extensions.
Update 21.03.24 - Version 2.114.0
  • Displayed file size fix.
Update 05.04.24 - Version 2.116.0
  • Added 2 new fields “Upload Success Background" & “Upload Error Background"
Update 24.04.24 - Version 2.117.0
  • Preview size adjustment feature