When a user selects multiple files, you may want to save each file separately in Bubble's database. This is achieved through an API Workflow that runs "on a list," allowing each item to be processed individually.

6.1. What is an API Workflow in Bubble?

Definition:
An API Workflow (or Backend Workflow) is a workflow that runs on Bubble's server. It can be called from the client side (e.g., using "Schedule API Workflow on a List") to perform operations like creating or modifying data in the database without blocking the user interface.

6.2. Creating the API Workflow

Accessing Backend Workflows:

• Open your application in the Bubble editor and navigate to the "Backend Workflows" (or "API Workflows") tab.

Creating a New Endpoint:

• Click on "New API Workflow" and name it, for example, "saveFile."
• Enable the option "Expose as a public API endpoint" so it can be called from other workflows.

Defining Parameters:

• Add the following parameters (configuring the correct type for each):

  • file_url (text)
  • file_id (text)
  • file_size (number)
  • file_name (text)
  • file_extension (text)
  • mime_type (text)
  • thumbnail (text)

  Each parameter will represent a field of the file obtained from the picker.

Configuring the Creation Action:

• Inside the API Workflow, add an action "Create a new thing."
• Select the data type (e.g., "File," "Document," or the name of the table in the database).
• Assign each parameter to the corresponding fields of the record being created.

6.3. Configuring "Schedule API Workflow on a List"

To execute the API Workflow on each item in a list:

On the Client-Side Workflow:

• When the file_selected event is triggered, add the action "Schedule API Workflow on a List."

Selecting the List:

• Specify the list of files to process. This list can come from an exposed state (e.g., selected_files ) that contains objects with the file fields.

Mapping Parameters:

• For each parameter in the API Workflow, assign the corresponding value from the Current item's in the list. For example:
  • file_url : Current item's file_url
  • file_id : Current item's file_id
  • file_size : Current item's file_size
  • file_name : Current item's file_name
  • file_extension : Current item's file_extension
  • mime_type : Current item's mime_type
  • thumbnail : Current item's thumbnail

6.4. Practical Example

Suppose the plugin exposes a state called selected_files , which is a list of objects. Each object includes: file_url , file_id , file_size , file_name , file_extension , mime_type , and thumbnail .

Steps:

API Workflow Configuration:

• Endpoint : saveFile
• Parameters : file_url, file_id, file_size, file_name, file_extension, mime_type, thumbnail
• Action : Create a new record in the database by assigning:
  • URL = file_url
  • ID = file_id
  • Size = file_size
  • Name = file_name
  • Extension = file_extension
  • MIME Type = mime_type
  • Thumbnail = thumbnail

In the Client-Side Workflow:

• When the file_selected event is triggered, add the action "Schedule API Workflow on a List."
• Configure the action to:
  • Endpoint to execute : saveFile
  • List to execute on : selected_files
  • Parameter Mapping : Assign each parameter (file_url, file_id, etc.) to the corresponding value of the Current item's.

6.5. Notes and Best Practices

Data Validation:
Ensure that the data obtained from the picker is valid. Although the plugin incorporates validations, the API Workflow can include additional checks.

Error Handling:
Configure actions in the API Workflow to handle errors, such as notifying the administrator or retrying the operation in case of failure.

Scalability:
Using "Schedule API Workflow on a List" allows processing a large number of files independently on the server, avoiding client-side bottlenecks.

Auditing:
Consider extending the API Workflow to log additional information about each operation, facilitating auditing and troubleshooting.

Testing:
Perform thorough testing to ensure that each file is saved correctly in the database.