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:

javascript
 // 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:

javascript
 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:

javascript
 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.

1. 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.