Upload an image from Bubble to an external API (Xano)

Hey there! In this guide, we'll walk through the steps to upload images from Bubble to Xano, a no-code platform for building backend services. This process will allow you to store and manage your images in Xano's database, making it easy to integrate them into your web or mobile applications.

Step 1: Set up the API Endpoint in Xano

First, let's set up the API endpoint in Xano that will receive the image upload:

1. In the Xano dashboard, create a new table (or use an existing one) to store your images.
2. Add a new field of type "File Resource" to the table. This field will hold the uploaded image data.
3. Create a new API endpoint with the HTTP method set to "POST".
4. In the endpoint configuration, map the "File Resource" field to the request body.
5. Add a "Create Image from File" function to the endpoint, which will convert the uploaded file into an image data type.
6. Store the output of the "Create Image from File" function in the "File Resource" field you created earlier.

Step 2: Configure the API Connector in Bubble

Next, we'll set up the API connector in Bubble to communicate with the Xano endpoint:

1. In the Bubble editor, go to the "API Connector" section and create a new connector.
2. Paste the URL of the Xano API endpoint you created in Step 1.
3. Set the HTTP method to "POST".
4. In the request body, provide a sample image URL to initialize the API call.

Step 3: Build the Image Upload Workflow

Now, let's create the workflow that will handle the image upload process:

1. Drag a "Picture Uploader" element onto your Bubble page. This will allow users to select an image from their device.
2. Add a "Submit" button to trigger the upload process.
3. Display the value of the "Picture Uploader" element on the page (optional, for demonstration purposes).
4. In the "Submit" button's workflow, follow these steps:

a. Add the "HTTPS://" prefix to the value of the "Picture Uploader" element. b. Locate the API connector you set up in Step 2. c. In the request body, set the value to the prefixed "Picture Uploader" value from the previous step.

Step 4: Test the Image Upload

Now you're ready to test the image upload process:

1. Preview the Bubble page you've been working on.
2. Click the "Picture Uploader" element and select an image from your device.
3. Observe the value displayed on the page. You'll notice that Bubble doesn't provide the complete URL for the uploaded image, hence the need for the "HTTPS://" prefix.
4. Click the "Submit" button to initiate the upload to Xano.
5. Go back to the Xano dashboard and check the table you set up in Step 1. You should see the uploaded image stored in the "File Resource" field.

Congratulations! You've successfully uploaded an image from Bubble to Xano. With this process, you can easily integrate image uploads into your no-code applications, leveraging the power of Xano's backend services.