Xano Documentation

Content Upload

Upload Images, Videos, Audio, and Attachments
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.
Xano accepts base64 encoded files, URLs, or files uploaded directly in the debugger.
The file upload feature in the debugger
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.
Choose the type of content you are uploading.
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
Upload using the file picker
Upload an Image URL or base64 Encoded File:
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. Since the debugger uses a file picker by default, we must manually write the input 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.