Link to plugin page: https://zeroqode.com/plugin/multi-uploader-1550378962519x766759789228458000
Add awesome file/image uploader to your app!! Supports live preview, image/file size limits, file type, and much more! You can upload your files directly to your bubble account plan, Uploadcare plan, Filestack plan or Microsoft Azure plan. This Multi-Uploader is extremely customizable and configurable.
You must have an Uploadcare/Filestack 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/
1. Go to https://uploadcare.com, press Get free API key. Free Plan is limited to: 100 upload units 1 GB traffic per month 1 MB of smart storage.
2. After signing up and receiving your email confirmation, you will be transferred to Dashboard, where you can create a new project or use a default one.
3. Copy the project's public key.
Create an account on Filestack Sign Up.
Once you have an account you can begin creating applications. Each application is given a public API key and a secret key, these are used throughout Filestack to authenticate and authorize operations on your resources.
Having an API key gives you access to upload and transform files using Filestack.
Create New Application of Filestack to obtain the key
Create an account on https://portal.azure.com/
Press button storage account
3. Create a new project 4. Generate shared access signatures
5. Create a container where the files will be stored.
6. Set CORS
1. Place the Uploader element on page 2. Provide keys/storage name for respective service (if any)
3. Start uploading to respective service.
The plugin contains Uploader visual element which should be used on page.
Id: Uploader unique id/name.
Uploader text: Example: "Drag & Drop your files or Browse"
Server: Bubble AWS, Uploadcare, Filestack, Azure. When a server different from Bubble is used, it requires a Service key obtained from Service provider.
Enable attach to: Check to enable attach to function.
Thing in Bubble to be attached. This only works for Bubble internal AWS storage. If the thing is not valid, it will return an error.
Uploadcare KEY: Uploadcare public key (optional).
Filestack KEY: Filestack key (optional).
Azure Storage Account: Azure storage account name (optional).
Azure SAS: Azure SAS (optional).
Image quality: The quality of the output image supplied as a value between 0 and 100.
Max Files: Max. number of files.
Allow FileType Validation: Enable or disable file type validation.
Accepted FileTypes: Accepted file types [MIME TYPES] or wild cards. For example: writing this syntax in the field
image/* will accept all images. For .csv files should be used:
.csv. For pdf or doc use
Label FileType Not Allowed: Message shown when an invalid file is added.
File Validate Type Label: Message shown to indicate the allowed file types.
Allow FileSize Validation: Enable or disable file size validation.
FileSize (KB/MB): The maximum size of a file for example: 100MB or 100KB.
Total FileSize (KB/MB): Maximum size of all files in list, same format as
Label FileSize Exceeded: Status message shown when large file is dropped.
Label Max FileSize: Detail message shown when max file size was exceeded.
Label FileSize Exceeded: Status message shown when total file size exceeds maximum.
Label Total FileSize: Detail message shown then total file size exceeds maximum.
Allow Image Preview: Enable or disable preview mode.
Allow Image Validate Size: Enable or disable image size validation.
MinWidth: The minimum image width
MaxWidth: The maximum image width
MinHeight: The minimum image height
MaxHeight: The maximum image height
Label Size TooSmall: The message shown when the image is too small.
Label Size TooBig: The message shown when the image is too big.
Label MinSize: Message shown to indicate the minimum image size.
Label MaxSize: Message shown to indicate the maximum image size
Allow Image Crop: Enable or disable image cropping. If disabled other proprieties related to cropping will not work
Image Crop AspectRatio: The aspect ratio of the crop in human-readable format, for example:
Allow Image Resize: Enable or disable image resizing. If disabled the proprieties for resizing will not work
Image Resize TargetWidth: The output width in pixels
Image Resize TargetHeight: The output height in pixels
Image Resize Mode: The method in which the images are resized. Choose between
'contain'. Force will ignore the image aspect ratio. 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 then the given target dimensions
Image Resize Upscale: Set to false to prevent upscaling of images smaller than the target size
Clear after uploading: Clear the input value after upload
Start upload from workflow - If disabled, files will be uploaded automatically
Initialize from workflow: Check or uncheck the setting to initialize the plugin from workflow. Default value is
Instant Upload - Immediately upload new files to the server
Start upload - Automatically starts uploading the file
Remove File - Cleans the input of all files
Remove file from Azure - Delete files from your Azure account
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
The plugin returns the following states:
FileName - File name.
File - In this state, the URL of the file is returned.
Base64 - Here is a file encoded in base64 that will be returned
UUID/Handle/MD5 - A 128-bit number used to identify information in computer systems.
Max Files - Returns yes/no value for when max files are in element
File Size - File size
All files URL - Here all the links to your files are returned
All files uploaded - A state that shows that all files have been uploaded
Image width - Image width.
Image height - Image height.
Uploader Is Empty - The element has nothing waiting to be loaded.
Upload Percent - The percentage of file uploads on the server.
In this workflow we will show you how to save a thing in database using default bubble actions and plugin event
On Uploader element all files uploaded event
2. Add a pause action, so Bubble can take time to save the value to a field
3. Add a step to create an object , by providing the Uploader's File exposed element state and save the value to a field (file)
4. The file will be saved in Bubble's Data field with respective %name% in table
Update: 02/05/2019 –
Added new plugin states and element propriety .
Uploader is empty
New plugin propriety for initialization. The checkbox for Initialize from workflow now can be set. By default it's value is set to
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 in the workflow.
2. Select the "Uploader" element that is set to Azure, and write in the "File name" the name of the file that you want to delete.
Update: 19/01/2021 –
Fixed: bug in the “Uploadcare has finished uploading” event performance, with the active checkbox “Many files”. Update name: "Uploadcare has finished uploading".
Update: 27/01/2021 –
Fixed the "Instant Upload" bug for 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: 23/03/2021 -
Fixed the problem with the 's Uploader Is Empty state
Update: 24/03/2021 -
Fixed action Start Upload