Upload image to Supabase from blob:weweb

Ask us anything
1

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?

2

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

3

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);