Listing Blobs in Directory on Client

[laurensdschunk]

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!

[anshumanb (Anshuman Bhardwaj)]

Hi @laurensdschunk, 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 Using the Node.js Runtime with Vercel Functions section to get started with serverless functions.