Listing Blobs in Directory on Client

I want to be able to get all of the URLs for the images stored within a directory "/gallery" in my blob storage. Preferably I would do this on the client side, but if that is not possible, I could do it on an edge function. How would I accomplish this? I am using Vite + Vue. I know that there is the list() function, but I cannot figure out how to use it. Any help is appreciated!

Hi , welcome to the Vercel Community!

Yes, you can use the list function to get a list of the images. You can do it from your API handler as follows:

1import { list } from '@vercel/blob';23export default async function handler(request, response) {4  try {5    const { blobs } = await list({ prefix: 'gallery/' });6    const imageUrls = blobs.map(blob => blob.url);7    return response.status(200).json({ images: imageUrls });8  } catch (error) {9    console.error('Error listing blobs:', error);10    return response.status(500).json({ error: 'Failed to list images' });11  }12}

Do follow the getting started section to set up your project correctly. Also, checkout the https://vercel.com/docs/functions/runtimes/node-js#using-typescript-with-the-node.js-runtime section to get started with serverless functions.

Hi , welcome to the Vercel Community!

Yes, you can use the list function to get a list of the images. You can do it from your API handler as follows:

1import { list } from '@vercel/blob';23export default async function handler(request, response) {4  try {5    const { blobs } = await list({ prefix: 'gallery/' });6    const imageUrls = blobs.map(blob => blob.url);7    return response.status(200).json({ images: imageUrls });8  } catch (error) {9    console.error('Error listing blobs:', error);10    return response.status(500).json({ error: 'Failed to list images' });11  }12}