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:

import { list } from '@vercel/blob';

export default async function handler(request, response) {
  try {
    const { blobs } = await list({ prefix: 'gallery/' });
    const imageUrls = blobs.map(blob => blob.url);
    return response.status(200).json({ images: imageUrls });
  } catch (error) {
    console.error('Error listing blobs:', error);
    return response.status(500).json({ error: 'Failed to list images' });
  }
}

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:

import { list } from '@vercel/blob';

export default async function handler(request, response) {
  try {
    const { blobs } = await list({ prefix: 'gallery/' });
    const imageUrls = blobs.map(blob => blob.url);
    return response.status(200).json({ images: imageUrls });
  } catch (error) {
    console.error('Error listing blobs:', error);
    return response.status(500).json({ error: 'Failed to list images' });
  }
}