How to Save a list of image urls to image files in the Xano Database

Have you ever needed to save a list of image URLs as individual files in your database? Xano makes this process incredibly easy with its visual API builder. In this guide, I'll walk you through how to create an API endpoint that takes a comma-separated list of image URLs and saves each one as a binary file in Xano's database.

Prerequisites

Before we begin, make sure you have the following:

1. A Xano account
2. A table in your Xano database with a text field to store the comma-separated URL list and an array field to store the image files.

For this example, I've created a products table with a images text field and an image_array array field.

Step 1: Create a New API Endpoint

1. Navigate to the API section in your Xano workspace.
2. Click on the "Add API Endpoint" button in the "Default API Group."
3. Give your API endpoint a descriptive name, such as "image_convert," and click "Save."

Step 2: Retrieve Records from the Database Table

1. In the Function Stack, click the "+" button and select "Database Requests" > "Query All Records."
2. Choose the table from which you want to retrieve the records (in this case, "products").
3. Click "Save."

This function will retrieve all records from the products table and store them in a variable (e.g., products_one).

Step 3: Extract the Image URLs

1. Add a "For Each" loop by clicking the "+" button and selecting "Data Manipulation" > "Loop" > "For Each."
2. Set the list to the variable containing the records (products_one) and give the individual item a name (e.g., item).
3. Inside the loop, create a new variable to store the image URLs by clicking the "+" button and selecting "Data Manipulation" > "Create Variable."
4. Name the variable images and set its value to item.images.split(','). This will split the comma-separated list of URLs into an array.

Step 4: Create File Resources and Image Metadata

1. Add another "For Each" loop inside the first loop to iterate over the images array.
2. Inside the new loop, create a file resource for each image URL by clicking the "+" button and selecting "Content Upload" > "Create File Resource."
3. Set the file name to the last part of the URL by using filters (e.g., image.urlParse().path.split('/').last()).
4. Set the data to the image URL with any whitespace removed (e.g., image.trim()).
5. After creating the file resource, click the "+" button again and select "Content Upload" > "Create Image Metadata" to generate image metadata from the file resource.

Step 5: Store Images in the Array Field

1. Add a conditional statement by clicking the "+" button and selecting "Data Manipulation" > "Conditional."
2. Set the condition to check if the image_metadata variable is not null.
3. Inside the conditional, add the image_metadata to the end of the image_array field by clicking the "+" button, selecting "Data Manipulation" > "Arrays" > "Add to End of Array," and setting the array to item.image_array and the value to image_metadata.
4. After the conditional, edit the record in the database by clicking the "+" button, selecting "Database Requests" > "Edit Record," and setting the record ID to item.id and the image_array field to item.image_array.

Step 6: Test and Deploy

1. Save the API endpoint and run it to test the functionality.
2. Check the database table to ensure that the image_array field now contains the individual image files from the comma-separated list.
3. Once everything is working correctly, you can deploy the API endpoint to production.

Congratulations! You've successfully created an API endpoint that can save a list of image URLs as individual files in Xano's database. This process can be adapted to handle different data structures and use cases, enabling you to streamline your workflows and automate repetitive tasks with ease.