Storage bucket list returning empty array

[rickjerrity]

Hey all. I was messing around with the new Storage feature in the node REPL with the latest client library (1.7.6), but I seem to be having some issues listing objects in a bucket. I created the bucket and uploaded the picture using the dashboard. I'm able to download the object, but I'm unable to get a list of objects in the bucket.

Trying to list all objects in the profile_pic bucket:

> client.storage.from('profile_pic').list().then(res => console.log(res))
Promise { <pending> }
> { data: [], error: null }

Downloading a single object from the profile_pic bucket:

> client.storage.from('profile_pic').download('supabase-logo-dark.png').then(res => console.log(res))
Promise { <pending> }
> {
  data: Blob {
    [Symbol(type)]: 'image/png',
    [Symbol(buffer)]: <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 02 45 00 00 00 71 08 06 00 00 00 db 0a d7 53 00 00 00 09 70 48 59 73 00 00 0b 13 00 00 0b 13 01 ... 10506 more bytes>
  },
  error: null
}

Any ideas? Is this a bug or am I doing something wrong? Thanks!

[joshnuss]

@rickjerrity I ran into the same issue. Try passing the limit: option to list().

// without a path, pass `null` to list
client.storage.from('profile_pic').list(null, {limit: 10}).then(console.log)

// or you can pass the path prefix
client.storage.from('profile_pic').list('foo/bar', {limit: 10}).then(console.log)

That fixed it for me.

[rickjerrity]

Good call, that got it working. It hadn't occurred to me to try that.

This should probably be mentioned in the docs and/or maybe a sensible default limit could be applied, something like 10 objects.

Thanks!

[inian]

The backend has a default limit of 100 objects. Not sure why it is not being respected. Creating an issue to investigate - supabase/storage#9

[inian]

Fixed with supabase-js v1.7.7

[joshnuss]

wow, that was fast. Thanks @inian

[JPGallegos1]

This thread solves my issue but I got these responses when I try <img src="gala.png" alt="..." />
I've read the articles and docs but maybe I didn't catch the point.

[JPGallegos1]

I'm sure I didn't catch the point 'cause I'm trying to get the images from the storage with this method supabase.storage.getBucket('cats').then((res) => console.log(res));

But I got a status 400. I hope the next info helps you

URL/ref: https://awuuadethdizieyhtjcm.supabase.co/storage/v1/bucket/cats

[inian]

I see from the logs that this doesn't have the authorisation header. Can you show me how you are initialising the Supabase client? Are you passing the right key into the constructor?

[JPGallegos1]

You right. I had an issue with my Supabase keys and I'm already fixed it.

So, I have one last question: can I display all the images from my Storage?
I know every image has a specific token and with that token, I could complete it. For example:

• https://awuuadethdizieyhtjcm.supabase.co/storage/v1/object/sign/cats/gala.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJjYXRzL2dhbGEucG5nIiwiaWF0IjoxNjE3NDQ0Mzc5LCJleHAiOjE5MzI4MDQzNzl9.tSUoltkayMASrS_iYzL8ajeCK7Mk0ihk6qZ4AD-WtL4

• https://awuuadethdizieyhtjcm.supabase.co/storage/v1/object/sign/cats/dali.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJjYXRzL2RhbGkucG5nIiwiaWF0IjoxNjE3NDQ0NTEyLCJleHAiOjE5MzI4MDQ1MTJ9.fogxKRgmORHoOawHbPE9Hlo9jzT5MDYOsiGr0e5qR4o

This is what I'm trying:

[JPGallegos1]

I'll share with you a solution to display images from a bucket in case someone has the same issue.
Here's the author of that: https://twitter.com/James_HJ_Kim/status/1378503285871534080/photo/1

[inian]

Hi @JPGallegos1, the above solution looks good 👍. The only suggestion I would add to this is to use revokeObjectURL to make sure that there are no memory leaks (reference). You can return a function from useEffect to do this cleanup.

If you directly use signedURLs and send them to the image tag, you needn't worry about this.