Uploading multiple images in the API

Xano's no-code platform makes it easy to add and manage images for your application's data records. In this guide, we'll walk through the steps to upload multiple images while adding a new record to your database table.

Step 1: Set Up the Input Field

To upload images, you'll need to use the "File Resource" input type. This input allows you to handle files, Base64 encoded data, and image URLs.

1. Click the "+" button to add a new input field.
2. Scroll down to the "Storage" section and select "File Resource."
3. Change the structure from "Single" to "List" to allow multiple file uploads.
4. Optionally, set a minimum or maximum number of items in the list.

Step 2: Create a Variable to Store the Images

In the Function Stack, create a new variable to store the images you'll be uploading. This variable should be an empty array initially.

Step 3: Loop Through the Uploaded Files

Next, you'll need to loop through the uploaded files from the "File Resource" input. Within this loop, you'll create the image metadata and add it to the `newImages` array.

Step 4: Add the Record with the Uploaded Images

After looping through all the uploaded files and storing their metadata in the `newImages` array, you can add a new record to your database table. Use the `newImages` array for the image field in your record.

Replace `'YOUR_TABLE_NAME'` with the actual name of your database table.

Step 5: Test the Upload

Now you're ready to test the image upload process. You can use the Xano debugger, a frontend application, or a tool like Swagger to submit the form with multiple images.

In the debugger, you can provide image URLs in the "File Resource" input field for testing purposes. Alternatively, you can use Base64 encoded image data or upload actual files using a frontend application or Swagger.

After submitting the form, check your database table to ensure the new record has been added with all the uploaded images correctly associated with it.

That's it! With these steps, you can seamlessly upload multiple images while adding new records to your Xano database tables. This functionality can be incredibly useful for applications that rely on image data, such as e-commerce platforms, social media apps, or content management systems.