77min

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:

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.

Document image



3. Copy the project's public key.

Document image

Filestack

  1. Create an account on Filestack Sign Up.
  2. 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.
  3. Create New Application of Filestack to obtain the key
Document image

Azure

  1. Create an account on https://portal.azure.com/
  2. Press button storage account
Document image

3. Create a new project

4. Generate shared access signatures

Document image

5. Create a container where the files will be stored.

Document image

6. Set CORS

Document image

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)

Document image

3. Start uploading to the respective service.

Plugin Element Proprieties

The plugin contains the Uploader visual element which should be used on a page.

Document image
  • 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 the Service provider.
  • Enable attach to: Check to enable the attach to function.
  • 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.
  • Accepted FileTypes: Accepted file types [MIME TYPES] or wild cards. For example: writing this syntax in the fieldimage/* will accept all images. For .csv files should be used: text/csv, application/vnd.ms-excel, .csv. For pdf or doc use application/pdf, application/doc.
  • 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
  • Start upload from workflow - If disabled, files will be uploaded automatically
  • Initialize from workflow: Check or uncheck the setting to initialize the plugin from a workflow. The Default value is true
  • Instant Upload - Immediately upload new files to the server

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
Document image

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
Document image

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.

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
Document image

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)

Document image

3. The file will be saved in Bubble's Data field with respective %name% in table

Document image

Changelogs

Update: 02/05/2019 –

  • Added new plugin states and element propriety.
  1. Uploader is empty
  2. Image width
  3. Image height

The image height and width states will be triggered only when the file was uploaded and it is a image file type. [MIME TYPES]

Document image

New plugin propriety for initialization. The checkbox for Initialize from workflow now can be set. By default it's value is set to True.

Document image

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.

Document image

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.

Document image

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 field 'attachment to'

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



Updated 15 Jun 2022
Did this page help?
Yes
No