Redirect the API to an Image

Hey there! In this guide, I'll show you how to create a download or "get resource" button in Xano that allows users to access and download images directly from your API endpoints. Just like you can generate a CSV through the API, you can also enable direct access to image resources.

Step 1: Create an API Endpoint for Your Images

First, you'll need to create an API endpoint that retrieves your images. Here's an example endpoint that fetches an image record based on its ID:

// Fetch image record by ID
export default async (req, res) => {
 const { id } = req.params;
 const model = await env.Images.findOne({ where: { id } });

 // Return the image record
 return res.json(model);
}

When you run this endpoint and pass an image ID, you'll get the entire image record object, including the image URL in the images field.

Step 2: Add a Location Header for Redirection

To enable direct access to the image URL, you'll need to add a custom HTTP header that redirects the user to the image URL. Xano provides a handy HTTP_Headers utility function for this purpose.

In your function stack, navigate to the utility functions section and find the HTTP_Headers function. Then, add the following code to define a Location header:

export default (model) => ({
 'Location': `%s${sprintf('%s', model.images.url)}`,
});

Here's what's happening:

1. We're creating a Location header with a variable text substitution (%s).
2. The sprintf function is used to substitute the variable with the actual image URL from the model.images.url field.

Step 3: Update Your API Endpoint

Now, go back to your API endpoint and update it to use the HTTP_Headers function you just created:

import HTTP_Headers from 'utilities/HTTP_Headers?res=base64';

export default async (req, res) => {
 const { id } = req.params;
 const model = await env.Images.findOne({ where: { id } });

 // Set the Location header for redirection
 res.setHeaders(HTTP_Headers(model));

 // No need to return a response
 return res.status(302).send();
}

Here's what's happening:

1. We're importing the HTTP_Headers utility function.
2. After fetching the image record, we're calling res.setHeaders(HTTP_Headers(model)) to set the Location header with the image URL.
3. Finally, we're returning a 302 status code (for redirection) without a response body.

Step 4: Test Your Endpoint

Now, when you run your API endpoint with a valid image ID, you should be redirected directly to the image URL. You can test this in a few ways:

1. Use the "Get Resource" Button: In the Xano interface, you should see a "Get Resource" button next to your endpoint. Click it, and you should be redirected to the image URL and able to download or view the image.

2. Access the Endpoint URL: You can also access the endpoint URL directly in your browser or using a tool like cURL or Postman. Make sure to substitute the image ID in the URL. For example, if your endpoint is /api/images/:id and the image ID is 2, you would access https://your-xano-app.com/api/images/2. This should redirect you to the corresponding image URL.

That's it! You've now learned how to create a "get resource" button in Xano that allows users to download or access images directly from your API endpoints. This technique can be useful for building image galleries, file hosting services, or any application that requires direct access to image resources.