Upload your FlutterFlow Images to Xano!

Hey there! In this guide, we'll walk through the steps to upload images from your Flutter Flow application to your Xano database. We'll cover how the API works in Xano and how to set it up in Flutter Flow, followed by a quick demo.

Setting up the API in Xano

1. In your Xano project, create a new API with a single input of the file resource type. This is the standard input type for uploading content into Xano.

2. Add a "Create Image from File" action to generate metadata for the uploaded images.

3. Finally, add the image to your desired table (e.g., "images" table) using the "Add Record" action.

Configuring Flutter Flow

Now, let's jump into Flutter Flow and set up the image upload functionality.

1. In your Flutter Flow app, add a button or any other UI element that will trigger the image upload process.

2. Open the Action Flow editor for the UI element you added.

3. Add the "Upload Media to Local File" action. Here, you can specify options like allowing only photos, photos and videos, sourcing from camera or gallery, etc.

4. Add the "API Call" action to call your Xano API endpoint.

5. In the API Call action settings:

• Set the method type to POST.
• Enter your Xano API endpoint URL (available by clicking the "Copy Endpoint URL" option in Xano).
• Define a variable (e.g., image) with the type set to local file.
• Set the API call body type to multi-part.
• Set the parameter name to match your input name in Xano (in our example, it's file).
• Set the value source to be the image variable you defined earlier.

6. In the Action Flow editor, ensure the image variable is selected for the "Upload Media to Local File" action.

Testing the Image Upload

With the setup complete, you can now test the image upload functionality.

1. Run your Flutter Flow app in test mode.
2. Click the button (or other UI element) you added to trigger the image upload process.
3. Select an image from your device's gallery or capture a new photo with the camera.
4. After the upload is complete, you can check the request history in your Xano API to see the uploaded file and the record added to your database table.
5. Navigate to your Xano database table (e.g., "images") to view the uploaded image.

That's it! You've successfully uploaded an image from your Flutter Flow application to your Xano database. If you have any questions or need further assistance, feel free to leave a comment, visit the Xano community, or reach out to our support team via the chat inside Xano.