Cloudinary Uploader

Demo page


Enhance your app's media capabilities and try the Cloudinary Uploader Widget for Bubble – the perfect tool for developers seeking efficiency and elegance in media management.
This easy-to-integrate plugin transforms the way you handle images and videos, offering a streamlined, user-friendly experience.
It enables your users to upload files from a variety of sources to your website or application.


βœ… Effortless Integration:
Seamlessly embed the widget into your Bubble projects with just a few clicks.
βœ…Β Advanced Media Handling:
Upload, store, and manage images and videos effortlessly.
βœ…Β High Performance:
Enjoy fast, reliable uploads and optimized media delivery.
βœ…Β Customizable Design:
Tailor the widget's appearance to match your app's aesthetics.
βœ…Β Secure & Scalable:
Benefit from Cloudinary's robust security and scalability to grow with your needs.

How to Setup

1. Sign in to your Cloudinary account

Sign in and navigate to the dashboard: this section you'll get access to your API Key / API Secret
Image without caption

2. Populate plugin API Key / API Secret

After successfully logging into your Cloudinary account and locating your API credentials, it is time to grab them and populate plugin fields accordingly.
Image without caption

3. Setup uploader element

Now you can set up the Cloudinary Uploader element itself.
Drag it on your page and make sure you populate a few mandatory fields:
1. Cloud Name - it is located alongside the API Key and API Secret in your Cloudinary dashboard.
2. Preset Name - presets are workflow on the Cloudinary side that can handle file uploading and act as a middleware to modify uploaded files.
You'll be able to find your preset name in the "Settings -> Upload" section in your dashboard:
Element setup example:
Image without caption
Upload presets in Cloudinary (here you can add tags, and specify allowed types of files):
Image without caption
Image without caption
Also, the plugin comes with its actions to manage presets, or at least create/delete presets "Create upload preset", and "Delete upload preset".
Use those actions to quickly create a preset for example then after you can customize the created preset in your Cloudinary dashboard.

4. Result

After setting up the element with the required fields, it is time to test it and open the uploader on a button click for example as shown on this demo page.
To do this, you need to use "Open" element action:
Image without caption
The result:
Image without caption
Image without caption
As you can see, the uploader is up on a button click and now we can start to upload from different sources or just drag and drop some files from a personal computer.
After the upload is done, the plugin element will return a state that will be a list of uploaded file URLs.
Image without caption

Frequently Asked Questions

Have a question, or suggestion, or encountered an issue? πŸ€·β€β™‚οΈ Please contact us by sending an email to:
Want to report a bug? Please follow this guideline!

Powered by Notaku