# Saving Files to Bubble

Once your user has uploaded their files, you likely want to save it to your Bubble, or external, database.&#x20;

You can approach this in two ways. Either use the simpler list states that return just one data point (see [exposed-states](https://jake-bennett-tech.gitbook.io/ultimate-uploadcare/elements/ultimate-uploadcare-uploader/exposed-states "mention")) or use the more detailed 'Array of Files' state.&#x20;

## Saving from one of the list states

The simpler of the two. To save the file data you just need to run a basic workflow that saves the data to your database.

{% stepper %}
{% step %}

### Create a backend workflow

Create a backend workflow that saves the image to the database. This is the workflow that you will schedule with the 'Schedule API workflow on a list' action.

<img src="https://2719894295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM5I01SSNJZOVxD5Hqnlo%2Fuploads%2F85ZJzXCFCujY6pX1MBzi%2FScreenshot%202024-11-01%20at%2011.31.50.png?alt=media&#x26;token=82cd78f0-0d8b-451f-ba14-eaed32da51f1" alt="" data-size="original"><img src="https://2719894295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM5I01SSNJZOVxD5Hqnlo%2Fuploads%2FCy1GTujsG3HOjdiOrRYZ%2FScreenshot%202024-11-01%20at%2011.31.57.png?alt=media&#x26;token=04337cea-14f3-45fb-b1ac-40c503cbde0a" alt="" data-size="original">

{% embed url="<https://bubble.io/page?id=dragdropdevelop&name=ultimate-uploadcare&tab=Workflow&type=api&wf_item=bTILD>" %}
Workflow editor
{% endembed %}

{% endstep %}

{% step %}

### Create the trigger workflow

Using either one of the existing events (see [events](https://jake-bennett-tech.gitbook.io/ultimate-uploadcare/elements/ultimate-uploadcare-uploader/events "mention")) or a trigger from your own button/existing workflow, add a workflow action that reads the 'List of X' state and passes each item to the API workflow defined in step 1.

![](https://2719894295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM5I01SSNJZOVxD5Hqnlo%2Fuploads%2FwRrPCJjx1cyuhDXB69Um%2FScreenshot%202024-11-01%20at%2011.31.37.png?alt=media\&token=6ecd6e13-146e-4360-b95a-00e2bd4a1881)![](https://2719894295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM5I01SSNJZOVxD5Hqnlo%2Fuploads%2Flu9hZa2Sz7A6n6zjEcgr%2FScreenshot%202024-11-01%20at%2011.31.43.png?alt=media\&token=2e588c6b-bc9c-4825-b034-829bb894b315)
{% endstep %}
{% endstepper %}

## Saving from 'Array of files'

While the 'Array of Files' state does provide you with more information to save from, it requires an additional plugin and a backend workflow to work.

While I don't officially recommend or endorse a particular JSON manipulator plugin, the below example was implemented with [JSON Manipulator](https://bubble.io/plugin/json-manipulator-1629969174278x365092981307605000) by Opground.

{% stepper %}
{% step %}

### Create a backend workflow

Create a backend workflow that saves a single file to the database. This is the workflow that you will schedule with the 'Schedule API workflow on a list' action.

<img src="https://2719894295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM5I01SSNJZOVxD5Hqnlo%2Fuploads%2FspsgBQvx7DWTFo5kDxUB%2FScreenshot%202024-11-01%20at%2011.07.19.png?alt=media&#x26;token=1fa96632-6c5b-479b-a837-c80f197a2e7d" alt="" data-size="original"><img src="https://2719894295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM5I01SSNJZOVxD5Hqnlo%2Fuploads%2FVup5VMIHoXcY8bbmfmBp%2FScreenshot%202024-11-01%20at%2011.08.04.png?alt=media&#x26;token=91a6156d-30b2-4c26-ab73-33490016c6be" alt="" data-size="original">

<img src="https://2719894295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM5I01SSNJZOVxD5Hqnlo%2Fuploads%2F2PiayptCVkMF768uKJ73%2FScreenshot%202024-11-01%20at%2011.08.08.png?alt=media&#x26;token=d3d55491-467b-4c45-bca7-fb1202e92f51" alt="" data-size="original"><img src="https://2719894295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM5I01SSNJZOVxD5Hqnlo%2Fuploads%2FZ3M8LowB5KBPBOlIGa3o%2FScreenshot%202024-11-01%20at%2011.08.11.png?alt=media&#x26;token=417af976-d55f-48fe-851f-43bc1a4eab08" alt="" data-size="original">

<img src="https://2719894295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM5I01SSNJZOVxD5Hqnlo%2Fuploads%2FufWejThH6EQkIB6yyZGR%2FScreenshot%202024-11-01%20at%2011.08.14.png?alt=media&#x26;token=b1b1f9d9-192b-4898-995c-f47f52cfba81" alt="" data-size="original">

{% embed url="<https://bubble.io/page?id=dragdropdevelop&name=ultimate-uploadcare&tab=Workflow&type=api&wf_item=bTIKZ>" %}
Workflow editor
{% endembed %}
{% endstep %}

{% step %}

### Create the trigger workflow

Using either one of the existing events (see [events](https://jake-bennett-tech.gitbook.io/ultimate-uploadcare/elements/ultimate-uploadcare-uploader/events "mention")) or a trigger from your own button/existing workflow, add a workflow action that reads the 'Array of Files' state and passes each item to the API workflow defined in step 1.

<img src="https://2719894295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM5I01SSNJZOVxD5Hqnlo%2Fuploads%2FkapPmGEuRKcUMd0tMSuu%2FScreenshot%202024-11-01%20at%2011.18.39.png?alt=media&#x26;token=dffa2e1a-1780-4491-a0a3-d92fd9ee3868" alt="" data-size="original">

<img src="https://2719894295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM5I01SSNJZOVxD5Hqnlo%2Fuploads%2FUpp2xrilL8IMa4a1wkPZ%2FScreenshot%202024-11-01%20at%2011.18.46.png?alt=media&#x26;token=5bdf7011-1c79-446c-ab31-d84141dc4561" alt="" data-size="original">
{% endstep %}
{% endstepper %}
