How to delete a file from Supabase storage?

Ask us anything
1

I’m trying to delete the file from the storage bucket.
What’s the best way to accomplish this?

2

I think you may need to set up an edge function to achieve this. Maybe not if you can make the js calls client side securely

3

I’ve been getting as much answers as I can get from the Supabase AI assistant.

This is what it said to try

const response = await fetch('https://your-project-url.supabase.co/storage/v1/object/bucket-name/file-path', {
  method: 'DELETE',
  headers: {
    'Authorization': 'Bearer your-supabase-api-key'
  }
})
4

Blockquote I’ve been getting as much answers as I can get from the Supabase AI assistant.

This is what it said to try

const response = await fetch('https://your-project-url.supabase.co/storage/v1/object/bucket-name/file-path', {
  method: 'DELETE',
  headers: {
    'Authorization': 'Bearer your-supabase-api-key'
  }
})

Yeah but you can’t do this in WeWeb, I mean you theorethically can, but it is very insecure. Unless you have any other protections in place.

5

Agreed, but I think in this case you can use the native HTTP request in WeWeb which leds you hide the credentials.

I haven’t been able to figure out how to do it for storage uploads (still resorting to custom javascript which exposes the access token)

But this is why we need all the votes we can get here on the Supabase storage FR - https://feedback.weweb.io/

6

http requests from weweb are like any other client side request: everything is exposed.
If you don’t want to expose the details of the request you need to make it from your backend.

7

I’m new, but pretty sure these features would hide it?

image
image609×513 27.2 KB

8

This could work, but I don’t know how it works in the background) An idea would be to bind the file to user id so only if the req.user.id === file.user.id → Remove file

9

Every http request made from weweb with the request action is a client side request and it is exposed to the browser.
“make request through a server” is just to prevent CORS errors for those endpoint that don’t handle them, and usually if they don’t it’s probably because you should make the request on the backend.
“send credentials” is to include third party cookies in the request.

10

If we would want to make it through http request, how should be? I don’t find much information about how to set up this call

11

Not trying to be a negative Nancy here, but trying to get absolute certainty here as it does influence a substantial amount of workflows I plan to setup depending on this.

When I do the “make a request through a server” with both a field value and header value and look at Network in my Chrome Dev tools, I can see the request going to a weweb server, but it doesn’t contain the field value or header value. I’ve checked the endpoint and those values have come through.

By that logic I can’t see how it’s exposed on the front end? Unless it’s stored somewhere else that is accessible? Any pointers where I should look to see how it’s exposed?

@Joyce would be good if a WeWeb team member might shed some light on this. I couldn’t find much info on this beyond the tooltip provided. The Send User credentials tooltip is also blank, so for us non-technical users, it doesn’t give much clarity on what it can or cannot do or when it should be used.

12

If a request has secrets that you don’t want to expose make it from your backend.
from weweb make a request to your backend endpoint that can validate the request coming from weweb, then make the request you want.