0

Supabase is wonderful !! I am trying to upload an image to the public bucket using POST request to <SUPABASE_URL>/storage/v1/object/<BUCKET_NAME>/<IMAGE_NAME>.

The difficult is I have only base64 encoded image string and I am not able to make a successful request to above endpoint. Have tried numerous iterations of setting Content-type but no luck.

I am trying to upload my image from Appsmith which provides base64 format for the image from where I will have to hit the above endpoint.

Please help me out here.

MANISH AGRAWAL
  • 41
  • 1
  • 4

1 Answers1

1

I'm glad to be able to find another Supabase fan like me!

I hear your pain. Could you try this technique to convert base 64 string to a blob object?

const byteCharacters = atob(b64Data);

const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}

const byteArray = new Uint8Array(byteNumbers);

const blob = new Blob([byteArray], {type: contentType});

The blob variable at the end is the variable you can use to upload to Supabase.

Also, have you considered using the Supabase-js SDK? It will make your life a lot easier as they provide better API's to interact with Supabase.

You can get the supabase-js package here: https://www.npmjs.com/package/@supabase/supabase-js

And you can find some sample code here: https://supabase.io/docs/reference/javascript/storage-from-upload

In your case, you could do something like this to upload your file:

const { data, error } = await supabase
  .storage
  .from('avatars')
  .upload('public/sample.png', blob, {
    cacheControl: 3600,
    upsert: false
  })
Alon Barad
  • 1,491
  • 1
  • 13
  • 26
dshukertjr
  • 15,244
  • 11
  • 57
  • 94
  • 1
    I was using AppSmith for creating a dashboard where the use case for uploading the image was failing as AppSmith just provided me a base64 value and I only had the option to do a POST request to /storage endpoint at my supabase instance. As a result I had to switch from Appsmith to completely write my own dashboard in Next.js. I feel I made the right decision as Next.js + Supabase does wonder. Also appsmith (lowcode platform) was crashing in times. Anyways thanks a lot for your advice. – MANISH AGRAWAL Jul 15 '21 at 15:27
  • @MANISHAGRAWAL So glad to hear that everything is working out for you! – dshukertjr Jul 16 '21 at 03:13