# Upload image to Supabase from blob:weweb

**URL:** <https://community.weweb.io/t/upload-image-to-supabase-from-blob-weweb/9137>\
**Category:** Ask us anything\
**Created:** [June 15, 2024, 5:52pm UTC](https://community.weweb.io/t/upload-image-to-supabase-from-blob-weweb/9137 "2024-06-15T17:52:29Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![m8dhouse](https://avatars.discourse-cdn.com/v4/letter/m/0ea827/32.png) [@m8dhouse](https://community.weweb.io/u/m8dhouse)\
**Post date:** [June 15, 2024, 5:52pm UTC](https://community.weweb.io/t/upload-image-to-supabase-from-blob-weweb/9137/1 "2024-06-15T17:52:29Z")

</div>

Hi

I request an image form an API and it returns a Base64 in a json.  
This is converted and I then get a blob: onject. This is can link to an image placeholder.  
So far so good.

Now when the user is ready (click button) I need to upload that image to Supabase. I’m a bit stuck here … I can’t pass the variable that holds the reference as the file then contains the blob:… text and not the actual contents (PNG file).

Any tips and how to do this?

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [June 15, 2024, 5:56pm UTC](https://community.weweb.io/t/upload-image-to-supabase-from-blob-weweb/9137/2 "2024-06-15T17:56:57Z")

</div>

You probably would need to do some more complex JS to transform it into an ArrayBuffer

> **[Upload a file | Supabase](https://supabase.com/docs/reference/javascript/storage-from-upload#upload-file-using-arraybuffer-from-base64-file-data)**
>
> Upload a file

---

<div class="post-metadata">

**Author:** ![m8dhouse](https://avatars.discourse-cdn.com/v4/letter/m/0ea827/32.png) [@m8dhouse](https://community.weweb.io/u/m8dhouse)\
**Post date:** [June 15, 2024, 7:54pm UTC](https://community.weweb.io/t/upload-image-to-supabase-from-blob-weweb/9137/3 "2024-06-15T19:54:32Z")

</div>

> [@Broberto](#):
>
> ArrayBuffer

after some Google-ing and support of AI code I got this working. It’s getting conflicts with something as the Weweb UI hangs sometimes when opening this to edit …

// Function to convert a base64 string to an ArrayBuffer  
const base64ToArrayBuffer = (base64) =\> {  
const binaryString = atob(base64);  
const length = binaryString.length;  
const buffer = new ArrayBuffer(length);  
const view = new Uint8Array(buffer);

for (let i = 0; i \< length; i++) {  
view[i] = binaryString.charCodeAt(i);  
}

return buffer;  
};

// Function to get raw PNG data from a base64 string  
const getRawPngData = (base64Data) =\> {  
// Ensure the base64 string does not have the prefix  
const base64WithoutPrefix = base64Data.replace(/^data:image/png;base64,/, ‘’);

// Convert the base64 string to an ArrayBuffer  
const arrayBuffer = base64ToArrayBuffer(base64WithoutPrefix);

// Return the raw binary data  
return new Uint8Array(arrayBuffer);  
};

// Usage  
const base64Data = context.workflow[‘2a96ee3e-4f4b-4698-ae2f-69e553bfecd9’].result?.[0]?.[‘base64’];  
return getRawPngData(base64Data);