1️⃣: CLOUDINARY UPLOADER WIDGET =============================

📋 ELEMENT DESCRIPTION
--------------------------------
CLOUDINARY UPLOADER WIDGET is a complete, interactive user interface that enables your users to upload files from a variety of sources to your website or application along with picture cropping capabilities.

🔧 STEP-BY-STEP SETUP
--------------------------------
0) Sign-up for CLOUDINARY: https://cloudinary.com/users/register_free, note the CLOUDINARY CLOUD NAME assigned to your account.

1) In CLOUDINARY CONSOLE, go to SETTINGS > UPLOAD -> UPLOAD PRESETS, enable an UPLOAD PRESET. You may use either SIGNED or UNSIGNED presets. Note the UPLOAD PRESET NAME. See https://support.cloudinary.com/hc/en-us/articles/360016481620-What-are-Upload-presets-and-how-to-use-them for more information.

2a) Register on plugins.wiseable.io. Create a new Credential which associates your BUBBLE APP URL with your CLOUDINARY API SECRET.
The registration service will generate your PUBLIC ACCESS KEY. This key serves as a secure proxy for your real CLOUDINARY API SECRET. It allows your application to communicate with the service without exposing your real CLOUDINARY API SECRET. Since this PUBLIC ACCESS KEY is explicitly tied to your registered BUBBLE APP URL, it can only be used from that domain, ensuring that even if the key is publicly visible, it remains safe and cannot be misused by unauthorized sources.

2b) In the Plugin Settings, enter the following:
  - CLOUDINARY CLOUD NAME
  - CLOUDINARY API KEY
  - PUBLIC ACCESS KEY (generated from plugins.wiseable.io)

3) Drag and drop the CLOUDINARY UPLOADER WIDGET element in your app.

4) Select the element and configure the APPEARANCE fields:

FIELDS:
- OUTPUT TYPE: Returned type. Must always be set to FILE METADATA (Cloudinary)
- UPLOAD PRESET: Upload presets allow defining a set of actions that would occur upon the upload of a resource. These actions could be performing a transformation, changing the access control of a resource, applying an add-on capability, and many other options. See https://support.cloudinary.com/hc/en-us/articles/360016481620-What-are-Upload-presets-and-how-to-use-them
- MULTIPLE: Whether selecting and uploading multiple assets is allowed.
- CROPPING: Set to yes if you want to allow your users to interactively crop their images before uploading them to Cloudinary.  Cropping is supported only with single-file uploading so make sure to also set the multiple widget parameter to no in order to enable interactive cropping.
- SINGLE UPLOAD AUTOCLOSE: Whether the Upload widget automatically closes after the upload completes.
- AUTO MINIMIZE: Automatically minimize the widget after the upload begins.
- SHOW UPLOAD MORE BUTTON: Whether the Upload More button will be displayed after the upload completes.
- SHOW ADVANCED OPTIONS: Whether to display the Advanced options, which enables users to set the Public ID, Add a Tag, and select an Upload Preset
- DEFAULT SOURCE: The source that's selected when the widget is opened.
- SOURCES ORDER: Display order of the sources, comma separated. Valid values are : local | url | camera | dropbox | image_search | facebook | instagram | shutterstock | gettyimages | istock | unsplash | google_drive
- EMBEDDED MODE: Enables embedding the widget inside your web page instead of it appearing as a modal dialog.
- MAXIMUM FILES: The maximum number of files allowed in multiple upload mode. If a user selects or drags more than the allowed amount, no files will be uploaded
- MAX FILE SIZE: If specified, perform client-side validation to prevent uploading files larger than the given bytes size.  Default: null (no client-side limit)  Example: 5500000 (5.5 MB) Notes:  - Applies to local files only - Upload size is limited on the server side by the maximum file size set in your account's Usage Limits - The preview, crop, and pixel-count options are not available for files larger than 40 MB (the files can still be uploaded)
- FOLDER: Folder name for all uploaded assets. Acts as the prefix of assigned public IDs.
- ALLOWED FORMATS: Allows client-side validation of the uploaded files based on their file extensions. You can specify one or more file extensions, and/or limit the allowed files to "video" or "image". Only applies when uploading files from a local device. Expected format is comma-separated file extensions (jpg,gpf,mp4)
- MAX IMAGE FILE SIZE: If specified, perform client-side validation to prevent uploading image files larger than the given bytes size.  Default: null (no client-side limit)  Example: 1500000 (1.5 MB) Notes:  - Overrides maxFileSize (if set) for images  - Applies to local files only - Upload size is limited on the server side by the maximum file size set in your account's Usage Limits - The preview, crop, and pixel-count options are not available for files larger than 40 MB (the files can still be uploaded)
- MAX IMAGE WIDTH: f specified, client-side scale-down resizing takes place before uploading if the width of the selected file is larger than the specified value.
- MAX IMAGE HEIGHT: If specified, client-side scale-down resizing takes place before uploading if the height of the selected file is larger than the specified value.
- MIN IMAGE WIDTH: If specified, client-side validation takes place before uploading. If the width of the selected file is smaller than the specified value, the upload is cancelled.
- MIN IMAGE HEIGHT: If specified, client-side validation takes place before uploading. If the height of the selected file is smaller than the specified value, the upload is cancelled.
- MAX VIDEO FILE SIZE: If specified, perform client-side validation to prevent uploading video files larger than the given bytes size.  Default: null (no client-side limit)  Example: 15000000 (15 MB) Notes:  - Overrides maxFileSize (if set) for videos  - Applies to local files only - Upload size is limited on the server side by the maximum file size set in your account's Usage Limits
- MAX RAW FILE SIZE: If specified, perform client-side validation to prevent uploading raw files larger than the given bytes size.  Default: null (no client-side limit)  Example: 2000000 (2 MB) Notes:  - Overrides maxFileSize (if set) for raw files  - Applies to local files only - Upload size is limited on the server side by the maximum file size set in your account's Usage Limits
- THEME: The name of a predefined widget theme. Widget behavior is the same for all themes.  Supported themes: default, white, minimal, purple, custom. Use Custom for the below section.
- LOCAL: Upload a file from your local device. Adds the My Files source option.
- URL: Upload a file from a remote location. Adds the Web Address source option.
- CAMERA: Upload an image file via the device's camera. Adds the Camera source option. Note: Desktop/laptop only - a mobile device's camera is accessed through the local (My Files) source option.
- DROPBOX APP KEY: Add the App key of your Dropbox App to enable this source.
- GOOGLE SEARCH API KEY: Add the API key for your Google Custom Search account to enable this source.
- FACEBOOK: Upload an image from a Facebook account. Adds the Facebook source option.
- FACEBOOK APP ID: The App ID of your own application for accessing your users' Facebook accounts. If not provided, uses the Cloudinary Media Upload app.
- INSTAGRAM: Upload an image from an Instagram account. Adds the Instagram source option.
- INSTAGRAM CLIENT ID: The App ID of your own application for accessing your users Instagram accounts. If not provided, uses the Cloudinary Media Upload app.
- SHUTTERSTOCK: Upload an image from a Shutterstock account. Adds the Shutterstock source option.
- GETTY IMAGES: Upload an image from a Getty Images account. Adds the gettyimages source option.
- ISTOCK: Upload an image from an iStock account. Adds the iStock source option.
- UNSPLASH: Upload an image from Unsplash. Adds the Unsplash source option.
- GOOGLE DRIVE: Upload a file from a Google Drive account. Adds the Google Drive source option.
- GOOGLE DRIVE CLIENT ID: The Client ID of your own Google Drive application for accessing your users' Google Drive accounts. If not provided, uses the Cloudinary Google Drive app.
- SHOW SKIP CROP BUTTON: Whether to display the 'skip' button on the interactive cropping step, making the step mandatory if set to false.  Relevant only if the cropping feature is enabled.

7) Integrate the logic into your application using the following EVENTS, STATES and ACTIONS:

EVENTS:
- ALL FILES UPLOADED: Event which is triggered when all files have been processed.
- ERROR: Event triggered upon error.

EXPOSED STATES:
- UPLOADED FILES: List of Uploaded FIles' metadata
- ERROR MESSAGE: Populated upon ERROR event

ELEMENT ACTIONS - TRIGGERED IN WORKFLOW:
- OPEN: Open the Cloudinary Uploader.
- CLOSE: Close the Cloudinary Uploader
- MINIMIZE: Minimize the Cloudinary Uploader


2️⃣: CLOUDINARY FILE UTILITIES (FRONT-END)
=========================================

📋 ELEMENT DESCRIPTION
--------------------------------
CLOUDINARY FILE UTILITIES (FRONT-END) provides front-end actions for Cloudinary operations via a secure signature service and exposes SUCCESS/ERROR events and states for results and error messages.

🔧 STEP-BY-STEP SETUP
--------------------------------
0) If not already done, perform steps 0–2 from the CLOUDINARY UPLOADER WIDGET setup and ensure plugin settings include CLOUDINARY CLOUD NAME, CLOUDINARY API KEY, PUBLIC ACCESS KEY (generated from plugins.wiseable.io).

1) Add the CLOUDINARY FILE UTILITIES element to the page.

2) Integrate the logic into your application using the following CLOUDINARY FILE UTILITIES, states and actions:

EVENTS:
- SUCCESS: Event triggered upon success.
- ERROR: Event triggered upon error.

EXPOSED STATES:
- RESULTS: Populated upon SUCCESS event
- ERROR MESSAGE: Populated upon ERROR event

ELEMENT ACTIONS - TRIGGERED IN WORKFLOW:
- GENERATE PRESIGNED DOWNLOAD LINK: GENERATE DOWNLOAD PRESIGNED EXPIRING URL generates an URL allowing access to the specified object, expiring after the specified duration.

ACTION INPUT FIELDS:
- PUBLIC ID: PUBLIC ID of the file to generate the download file. The PUBLIC ID may be read from CLOUDINARY UPLOADER WIDGET UPLOADED FILES state.
- FORMAT: FORMAT of the file to generate the download file. The FORMAT may be read from CLOUDINARY UPLOADER WIDGET UPLOADED FILES state.
- RESOURCE TYPE: RESOURCE TYPE of the file to generate the download file. The RESOURCE TYPE may be read from CLOUDINARY UPLOADER WIDGET UPLOADED FILES state.
- EXPIRE AFTER (S): The number of seconds before the presigned URL expires. Defaults to 10 seconds.

ACTION OUTPUT:
- RESULTS: Populated upon SUCCESS event. Returns the operation results.

🔍 IMPLEMENTATION EXAMPLE
======================
Feel free to browse the app editor in the Service URL for an implementation example.

⚠️ TROUBLESHOOTING
================
Any plugin related error will be posted to the the Logs tab, "Server logs" section of your App Editor.
Make sure that "Plugin server side output" and "Plugin server side output" is selected in "Show Advanced".

> Server Logs Details: https://manual.bubble.io/core-resources/bubbles-interface/logs-tab#server-logs