Asset API Tutorial | Webflow API

list.ts

import type { APIRoute } from "astro";
export const GET: APIRoute = async ({ request, locals }) => {
try {
    // Check if bucket is available
    const bucket = locals.runtime.env.CLOUD_FILES;
    if (!bucket) {
    return new Response("Cloud storage not configured", { status: 500 });
    }
    const options = { limit: 500 };
    const listed = await bucket.list(options);
    let truncated = listed.truncated;
    // Paging through the files
    // @ts-ignore
    let cursor = truncated ? listed.cursor : undefined;
    while (truncated) {
    const next = await bucket.list({
        ...options,
        cursor: cursor,
    });
    listed.objects.push(...next.objects);
    truncated = next.truncated;
    // @ts-ignore
    cursor = next.cursor;
    }
    // Return the files as a JSON object
    return new Response(JSON.stringify(listed.objects), {
    headers: { "Content-Type": "application/json" },
    });
} catch (error) {
    console.error("Error listing assets:", error);
    return new Response("Failed to list assets", { status: 500 });
}
};

Create the GET endpoint

Import the APIRoute type from "astro" and create a GET endpoint that accepts the locals parameter.

The locals object provides access to runtime environment variables and bindings, including the CLOUD_FILES binding that you'll use to interact with object storage.

Get the bucket and validate configuration

Access the CLOUD_FILES binding from locals.runtime.env and validate that the bucket is properly configured.

If the bucket isn't available, return a 500 error with a descriptive message to help with debugging.

list.ts

import type { APIRoute } from "astro";
export const GET: APIRoute = async ({ request, locals }) => {
try {
    // Check if bucket is available
    const bucket = locals.runtime.env.CLOUD_FILES;
    if (!bucket) {
    return new Response("Cloud storage not configured", { status: 500 });
    }
    const options = { limit: 500 };
    const listed = await bucket.list(options);
    let truncated = listed.truncated;
    // Paging through the files
    // @ts-ignore
    let cursor = truncated ? listed.cursor : undefined;
    while (truncated) {
    const next = await bucket.list({
        ...options,
        cursor: cursor,
    });
    listed.objects.push(...next.objects);
    truncated = next.truncated;
    // @ts-ignore
    cursor = next.cursor;
    }
    // Return the files as a JSON object
    return new Response(JSON.stringify(listed.objects), {
    headers: { "Content-Type": "application/json" },
    });
} catch (error) {
    console.error("Error listing assets:", error);
    return new Response("Failed to list assets", { status: 500 });
}
};

List files with pagination support

Use the .list() method to retrieve files from the bucket.

The method returns an R2Object list with pagination support. Set a limit of 500 files per request to balance performance and memory usage. The response includes a truncated flag indicating if more files are available, and a cursor for pagination.

list.ts

import type { APIRoute } from "astro";
export const GET: APIRoute = async ({ request, locals }) => {
try {
    // Check if bucket is available
    const bucket = locals.runtime.env.CLOUD_FILES;
    if (!bucket) {
    return new Response("Cloud storage not configured", { status: 500 });
    }
    const options = { limit: 500 };
    const listed = await bucket.list(options);
    let truncated = listed.truncated;
    // Paging through the files
    // @ts-ignore
    let cursor = truncated ? listed.cursor : undefined;
    while (truncated) {
    const next = await bucket.list({
        ...options,
        cursor: cursor,
    });
    listed.objects.push(...next.objects);
    truncated = next.truncated;
    // @ts-ignore
    cursor = next.cursor;
    }
    // Return the files as a JSON object
    return new Response(JSON.stringify(listed.objects), {
    headers: { "Content-Type": "application/json" },
    });
} catch (error) {
    console.error("Error listing assets:", error);
    return new Response("Failed to list assets", { status: 500 });
}
};

Key concepts:

Pagination: Buckets may contain thousands of files, so you use pagination to retrieve them in manageable chunks
Cursor-based pagination: Each response includes a cursor that points to the next page of results

Return the files as JSON

Return the complete list of files as a JSON response with proper headers. The listed.objects array contains all the files from the bucket, including metadata like file names, sizes, and creation dates.

list.ts

import type { APIRoute } from "astro";
export const GET: APIRoute = async ({ request, locals }) => {
try {
    // Check if bucket is available
    const bucket = locals.runtime.env.CLOUD_FILES;
    if (!bucket) {
    return new Response("Cloud storage not configured", { status: 500 });
    }
    const options = { limit: 500 };
    const listed = await bucket.list(options);
    let truncated = listed.truncated;
    // Paging through the files
    // @ts-ignore
    let cursor = truncated ? listed.cursor : undefined;
    while (truncated) {
    const next = await bucket.list({
        ...options,
        cursor: cursor,
    });
    listed.objects.push(...next.objects);
    truncated = next.truncated;
    // @ts-ignore
    cursor = next.cursor;
    }
    // Return the files as a JSON object
    return new Response(JSON.stringify(listed.objects), {
    headers: { "Content-Type": "application/json" },
    });
} catch (error) {
    console.error("Error listing assets:", error);
    return new Response("Failed to list assets", { status: 500 });
}
};

Response format: The returned JSON will contain an array of R2Object items, each with properties like:

key: The file name/path
size: File size in bytes
etag: Entity tag for caching
httpEtag: HTTP-compatible entity tag
uploaded: Upload timestamp
checksums: File integrity checksums
httpMetadata: HTTP headers and metadata

Create the GET endpoint

Import the APIRoute type from "astro" and create a GET endpoint that accepts the locals parameter.

The locals object provides access to runtime environment variables and bindings, including the CLOUD_FILES binding that you'll use to interact with object storage.

Get the bucket and validate configuration

Access the CLOUD_FILES binding from locals.runtime.env and validate that the bucket is properly configured.

If the bucket isn't available, return a 500 error with a descriptive message to help with debugging.

List files with pagination support

Use the .list() method to retrieve files from the bucket.

Key concepts:

Pagination: Buckets may contain thousands of files, so you use pagination to retrieve them in manageable chunks
Cursor-based pagination: Each response includes a cursor that points to the next page of results

Return the files as JSON

Response format: The returned JSON will contain an array of R2Object items, each with properties like:

key: The file name/path
size: File size in bytes
etag: Entity tag for caching
httpEtag: HTTP-compatible entity tag
uploaded: Upload timestamp
checksums: File integrity checksums
httpMetadata: HTTP headers and metadata

list.ts

import type { APIRoute } from "astro";
export const GET: APIRoute = async ({ request, locals }) => {
try {
    // Check if bucket is available
    const bucket = locals.runtime.env.CLOUD_FILES;
    if (!bucket) {
    return new Response("Cloud storage not configured", { status: 500 });
    }
    const options = { limit: 500 };
    const listed = await bucket.list(options);
    let truncated = listed.truncated;
    // Paging through the files
    // @ts-ignore
    let cursor = truncated ? listed.cursor : undefined;
    while (truncated) {
    const next = await bucket.list({
        ...options,
        cursor: cursor,
    });
    listed.objects.push(...next.objects);
    truncated = next.truncated;
    // @ts-ignore
    cursor = next.cursor;
    }
    // Return the files as a JSON object
    return new Response(JSON.stringify(listed.objects), {
    headers: { "Content-Type": "application/json" },
    });
} catch (error) {
    console.error("Error listing assets:", error);
    return new Response("Failed to list assets", { status: 500 });
}
};