Upload to storage bucket via HTTP

[EnzoBitMatrix]

Hi community!
I am building an app in AppGyver and am trying to figure out how I can upload a user image to a storage bucket in Supabase using the REST HTTP API.

From the documentation, I can only see guides on how to use UI, SQL, JavaScript, or Dart - not HTTP.

What I am trying to achieve:

1. user selects image from local device library (working)
2. user clicks 'Save' (working)
3. image uploaded to a bucket in my Supabase storage ie; POST https://domain.supabase.com/storage/bucket/image.ext
4. The upload path is then saved into a record in my table (ie; user_avatar = image.ext)

Does anyone have any thoughts? Can this even be done?

Thanks in advance.

[GaryAustin1]

I found this useful for figuring out format for accessing storage from a http function in the database:
https://supabase.github.io/storage-api/#/object/get_object_authenticated__bucketName___wildcard_

[riderx]

Same way a download signed url, i would like to create signed upload url and allow anyone with the url to upload

[fenos]

You can see the endpoint on the reference guide here https://supabase.com/docs/reference/storage/usage#upload-a-new-object

You can also check the storage-js upload method to get inspiration: https://github.com/supabase/storage-js/blob/main/src/lib/StorageFileApi.ts#L88

[TomasHubelbauer]

I believe the correct link as of today is https://supabase.com/docs/guides/storage/uploads/standard-uploads. Unfortunately it only shows the SDK usage not a cURL. The second corrected link is https://github.com/supabase/storage-js/blob/main/src/packages/StorageFileApi.ts which can be used to construct a cURL based on the logic in it.

[riderx]

I'm hitting the memory limit of Supabase function by downloading a file with axios from URL and transfer it to Supabase with the SDK.
Do we have a way to tell the SDK this is the URL file I want to upload?
Then the download happen in supabase backend directly ?

[KhaledGabr]

@riderx

I have the same exact issue. Trying to get the storage api to upload a picture from a public url.
etc: https://images.pexels.com/photos/15062486/pexels-photo-15062486.jpeg

did you find a solution to this ?

[favoriteother]

@riderx @KhaledGabr Hello! Did you guys find a solution to this? I was about to try something similar and saw your comments

[riderx]

Now you can create a presigned url and upload directly to it

[tanius]

I am […] trying to […] upload a user image to a storage bucket in Supabase using the REST HTTP API.

Had the same issue and documented my solution in an answer on StackOverflow.

And I noticed that the official documentation about this aspect of the APIs is a bit incomplete, as I could not find a place where the Storage API request URI format is documented. It is a prefix of https://{reference-id}.supabase.co/storage/v1/ and then the actual API route as shown in the Swagger UI docs for Storage API.

[TomasHubelbauer]

Here's a fetch example that works for me:

import databaseUrl from '…'
import serviceRole from '…';

export default async function uploadFile(file: File) {
  const response = await fetch(`${databaseUrl}/storage/v1/object/$bucket/${file.name}`, {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${serviceRole}`,
    },
    body: file,
  });

  return await response.json();
}

if (import.meta.main) {
  const file = new File(['Hello, world!'], 'hello-world.txt');
  console.log(await uploadFile(file));
}

You can also pass not the File instance directly to body but FormData where you add a key with an empty string for its name and the File instance for value so you can add other keys, like Cache-Control.

[jdgamble555]

You can get the service role from getSession() and access_token fwi.