Xano allows for a wide range of files to get uploaded using the API. There are 3 different categories of files that can be processed: Images, Videos, and Attachments. (Note: Audio files such as mp3 should be treated as Attachments). There is a generic file uploader that can be used as an input for your API to create the metadata for each category.
The Content Upload Functions are:
Create Image Metadata - Creates image metadata from a file resource so that it can be formatted properly to be stored in Xano.
Create Video Metadata - Creates video metadata from a file resource so that it can be formatted properly to be stored in Xano.
Create Attachment Metadata - Creates attachment metadata from a file resource so that it can be formatted properly to be stored in Xano.
Create File Resource - This functions is able to create a file resource in the function stack from a variable. Typically, you will use a file resource as an input. However, there are certain use cases, for example, where you may hit an external API which is providing you with a raw image or file. In this event, you will want to first use this function to create a file resource then use one of the create metadata functions.
Important - Inputting Content
It's important to understand how content upload works through the API in Xano. Watching the tutorial at the top of this page is encouraged.
**When uploading content (i.e. image, video, or attachment), the content must be inputted as an input type of file resource**
Use the input type file resource to upload images, videos, or attachments.
Notice the difference of what the inputs look like, for example with image metadata input versus file resource:
File resource is the correct input type to upload an image. Image (metadata) is incorrect.
The file resource input type will produce a file uploaded when used with Swagger. Xano also accepts base64 encoded files and URLs as inputs.
You are able to paste in a base64 encoded file or URL directly into the Debugger in Xano. However, if you wish to upload a file as the input, then you need to use Swagger.
Typically, front-end tools will produce an image URL which you can use to upload the image to Xano through the file resource input type. This is common but each front-end is different so be sure to reference their documentation.
Function: Create File Resource
This function can create a file resource in the function stack from a variable. You will want to use this function if you are working with an external API that is returning an image and you want to be able to store it in the Xano database. You still must create the image metadata like you would if you were using an input of file resource to upload an image.
Example - Upload an Image
Xano has convenient, pre-built API endpoints that you can use or reference if you are doing content upload.
If you select 'Add API Endpoint' to create a new API Endpoint, you will see the 'Upload Content' option.
Add a new API Endpoint that is Content Upload.
Then you will have the option to choose from image, video, or attachment upload.
For this example, we are going to use the API Endpoint: Upload an image.
The API Endpoint will be set up with a file resource input type and a Create Image From File function.
The pre-built upload image API endpoint.
The function, Create Image From File will create the image metadata from the value of the file resource input as shown below.
Create the content metadata from the file resource input.
The file resource input can handle:
URL of the content.
Base64 encoded file.
The file itself - Note: The Debugger in Xano does not support a file uploader, to access this when testing please open up Swagger by selecting 'Documentation'.
Example using an image URL:
Below we have the same API endpoint set up: The input type is a file resource and the function is creating the metadata.
In this example, we are inputting the image URL directly into the Debugger.
The result will show the image metadata for the inputted image:
A successful response with the newly created image metadata.
Example using File Uploader through Swagger
Click on Documentation and to try out the API in Swagger.
Find the API.
Click on "try it out".
Upload an image.
Click "execute".
Using Swagger to upload an image.
After uploading an image, this is the Metadata response from the "create image" API.
The response, in Swagger, of the newly created image metadata.
Adding an Image to the Database
There is an additional step needed to add the image to the Xano database. You must include an Add Record function after the Create Image Metadata function.
Make sure to map the image field to the result of the Create Image from File return variable.
After inputting an image and running the API endpoint the result will be shown below.
A newly created record with an uploaded image through the API. Xano will output the image URL for convenience.