Multi-Uploader Plugin

Introduction

Add an 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.

Prerequisites

You must have a Uploadcare/Filestack 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/
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
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.
Image without caption
3. Copy the project's public key.
Image without caption
Filestack
  1. Create an account on Filestack Sign Up.
  1. 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.
  1. Create New Application of Filestack to obtain the key
Image without caption
Azure
  1. Create an account on https://portal.azure.com/
  1. Press button Storage accounts
Image without caption
3. Create a new project
Image without caption
4. Generate shared access signatures
Image without caption
5. Create a container where the files will be stored.
Image without caption
  1. Setting up Name and Public access level to Container
Image without caption
  1. Select created container
  1. Generate SAS token and URL
Image without caption
  1. Copy given Blob SAS token
10. Set CORS for Storage account
Image without caption

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
  • Max file size - It is a native setting for bubble, here you set the maximum size of a file that can be uploaded.
  • File uploads enabled - here set for bubble if you want the file to be uploaded in the file manager.
  • 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 the Service provider.
  • A thing in Bubble to be attached. This only works for Bubble's 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 is supplied as a value between 0 and 100.
  • Max Files: Maximum number of files.
  • Allow FileType Validation: Enable or disable file type validation.
  • Allow Image Resize - When set to false the remove button is hidden and disabled.
  • Allow Remove - When set to false the remove button is hidden and disabled.
  • Allow Process - Enable or disable the process button.
  • Allow Multiple - Enable or disable adding multiple files.
  • Accepted FileTypes: File extensions - Enter extensions for validation
  • Label FileType Not Allowed: A Message is 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 the list, same format as FileSize
  • Label FileSize Exceeded: Status message shown when a large file is dropped.
  • Label Max FileSize: Detail message is shown when the max file size was exceeded.
  • Label FileSize Exceeded: Status message shown when the total file size exceeds the maximum.
  • Label Total FileSize: Detail message shown then total file size exceeds the 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 is shown when the image is too small.
  • Label Size TooBig: The message is 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:'1:1' or '16:10'
  • 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 '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
  • 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
  • Instant Upload - Immediately upload new files to the server.
  • Font color - set the color of the text for the uploader.
  • Background color - set the background color for the uploader.
  • Grid Layout - renders items in a grid.
  • Font color hover - set the text color of hover for the uploader.
  • Background Color hover - set the background color of the hover for the uploader.

Element Actions

  • Start upload - Automatically starts uploading the file
  • Remove File - Cleans the input of all files
  • Remove files from Azure - Delete files from your Azure account
Image without caption

Element Events

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

Element States

The plugin returns the following states:
  • FileName - Filename.
  • 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.
  • Images width - is a list with the width of all images.
  • Total files uploaded - the total number of uploaded files.
  • Total files error - the total number of files that throw errors when loading.
  • List of File Sizes - a list with the size of all files.
  • Last image width - the width of the last loaded image.
  • Last image height - the height of the last loaded image.
  • Progress for the current file - the loading progress of the current file.

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

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 it's 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 in 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 checkbox “Many files”. 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”

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.

Demo to preview the settings