upload file on supabase using appsmith corrupt image

Question

I'm trying to upload an image on supabase storage with appsmith and the file picker option. It work but my file is corrupt and i don't know why.

export default {
function: async () => {
    const sup = JSObject1.client //is the supabase-js client
    const { data, error } = await sup
    .storage
    .from('image')
    .upload(FilePicker1.files[0].name, FilePicker1.files[0].data, {contentType: "image/png"})
    console.log(error)
    console.log(data)
},

upload with appsmith

i uploaded a test image with the supabase drag and drop tool to compare the size of the image i want to upload

upload with supabase drag and drop tool

you see the size is fatter on the image post with appsmith

Any solution ?

I check binary on appsmith filepicker but same problem

Answer 1

I find a result after few hours.

1. You need to change the datatype of filepicker to Base64

2. remove the uri because the base64 data begin by 'data:contentType:base64,' with for example data.split('base64,')[1]

3. you need a fonction to decode base64, appsmith support lib but i find a simple function for that.

   Put that's code in an jsobject

base64ToArrayBuffer : (base64) => {
 var binaryString = atob(base64);
 var bytes = new Uint8Array(binaryString.length);
 for (var i = 0; i < binaryString.length; i++) {
     bytes[i] = binaryString.charCodeAt(i);
 }
 return bytes.buffer;
 }

4. decode and send (don't forget the contenttype option)

const { data, error } = await sup
        .storage
        .from('image')
        .upload(appsmith.store.image.name, JSObject1.base64ToArrayBuffer(base64), {contentType: "image/png"})
        console.log(error)
        console.log(data)