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.