Plugins
Templates

Multi-Uploader Plugin

Link to plugin page: https://zeroqode.com/plugin/multi-uploader-1550378962519x766759789228458000

Introduction

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.

Prerequisites

You must have an Uploadcare/Filestack or Azure developer account to use the plugin and upload to these buckets by accessing:

  1. For uploadcare - https://uploadcare.com/

  2. For filestack - https://www.filestack.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

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.

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

Azure

  1. Create an account on https://portal.azure.com/

  2. 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

II. Setting up the Plugin on Bubble side with keys

1. Place the Uploader element on page 2. Provide keys/storage name for respective service (if any)

3. Start uploading to respective service.

Plugin Element Proprieties

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 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: 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 FileSize

  • 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:'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. 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 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 file from Azure - Delete files from your Azure account

Element Events

  • 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

Element States

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.

Workflow example

In this workflow we will show you how to save a thing in database using default bubble actions and plugin event

  1. 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

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]

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

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.

Remove file from Azure repositiry

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: 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

Things to Note

Important: Default Bubble picture uploader will not work in the same page if you are using this multi-uploader, & IE is not supported.

Demo to preview the settings