Content Upload (Images, Videos, Audio, PDFs, etc.)

Hey there! In this guide, we'll cover how to upload various types of content like images, videos, audio files, and attachments (like PDFs) in Xano. Let's dive in!

Setting Up Your Database

Before we start uploading content, we need to set up the appropriate field in our database to store the content metadata.

1. In your Xano workspace, navigate to your database and click "Add New Column."
2. Scroll down to the "Storage" section and select the appropriate field type for the content you want to upload (e.g., Image, Video, Audio, or Attachment).
3. Give your field a name (e.g., "image") and click "Save."

Note that Xano stores the metadata of the file, not the actual file itself. We'll see why this is important when we jump into the function stack and API.

Uploading Content via Raw Database Entry

For a quick test, you can upload content directly from the database:

1. Click on the field you just created (e.g., "image").
2. Click the uploader icon and select a file from your computer.
3. Give the file a name and click "Upload."

You'll see a preview of the file, along with options to download it, copy the image URL, and even preview it in your browser using the copied URL.

Uploading Content via the API

While the raw database entry is handy for testing, you'll typically upload content through the API in a real-world scenario. Here's how:

1. In your Xano workspace, navigate to the API section and add a new CRUD endpoint.
2. In the "Add Input" section, select "Storage" and then "File Resource." Give this input a name (e.g., "file").
3. In the Function Stack, locate the "Content Upload" section and add the appropriate function for your content type (e.g., "Create Image Metadata" for images).
4. Map the "File Resource" input to the value of the metadata creation function.
5. In the "Add Record" section, map the variable from the metadata creation function to the appropriate field in your database.
6. Save and run the endpoint.

You can upload files directly using the file picker or provide a file URL in the JSON input.

For example, to upload an image URL:

If you need to create the file resource from an external API response, use the "Create File Resource" function in the Content Upload section before creating the metadata.

Uploading Content with Shortcut Endpoints

Xano provides pre-built endpoints for uploading content, which can save you time:

1. In the API section, click "Add API Endpoint."
2. Locate the appropriate "Upload Content" endpoint (e.g., "Upload Image").
3. Customize the endpoint as needed, or use it as a foundation for your specific requirements.

These pre-built endpoints include the necessary steps for creating the file resource, generating the metadata, and (optionally) adding the content to a record.

That's it! You're now ready to start uploading and managing all sorts of content in your Xano applications. Don't forget to subscribe to our channel, like the video, and stay tuned for more helpful guides!