Upload from imageInput to Google Cloude Storage resource

[takeitpersonally.app]

I am struggling with this for 2 days:

1. imageInput produces value as "blob:https://"
2. Google Cloude Storage (connected as resource) expects Binary data for upload
3. I am trying to convert blob to base64 first, and then to binary, but I keep getting errors "Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded."

It seems I tried everything by now, and I am about to quit this idea... I am using ChatGPT4 but still no success.

Could anyone help please?

Here is the code:

async function uploadFiles(files) {
for (let index = 0; index < files.length; index++) {
const fileObj = files[index];
console.log(Starting processing for file at index ${index});

try {
  const base64 = await utils.getDataByObjectURL(fileObj.uri);
  console.log(`File ${index} - Base64 string obtained`);
  // Log the first 500 characters of the base64 string
  console.log(`File ${index} - Base64 preview: ${base64.substring(0, 500)}`);

  // Ensure we only have the base64 part of the data, not the entire data URI
  const base64Data = base64.split(',')[1] || base64;

  if (!base64Data) {
    console.error(`File ${index} - No base64 data found.`);
    continue; // Skip this iteration if no base64 data found
  }

  // Decode base64 string to binary string
  const binaryString = atob(base64Data);
  // Log the first 500 characters of the binary string
  console.log(`File ${index} - Binary preview: ${binaryString.substring(0, 500)}`);

  const uniqueFileName = `image_${Date.now()}_${index}.png`;
  console.log(`File ${index} - Unique file name: ${uniqueFileName}`);

  upload_gcloud.trigger({
    additionalScope: {
      file_name: uniqueFileName,
      upload_data: binaryString,
    },
    onSuccess: (response) => {
      console.log(`Upload successful for file ${index}:`, uniqueFileName, response);
    },
    onFailure: (error) => {
      console.error(`Upload failed for file ${index}:`, uniqueFileName, error);
    },
  });
} catch (error) {
  console.error(`Error processing file ${index}:`, error);
}

}
}

uploadFiles(imageInput_photos.files);

Here is the log:

11:02:03 upload_loop ran successfully (0.013s).

11:02:03 Starting processing for file at index 0

11:02:03 File 0 - Base64 string obtained

11:02:03 File 0 - Base64 preview: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAYAAAA10dzkAAAAAXNSR0IArs4c6QAAIABJREFUeF6kvfmzXtd1HXjejJkEQBKcAVCcKXGQZEuU5Fi2y3El7titSLJsJz/GTqW7/6pU/9TdzlBOqjpVXYkdx5LcskhwJkWKg2hZIkUCHDC+sWuttdc5+5x7vwfI/VgsvPcN9557hr3XXnta+sNv/+5eKaUsLS2Vsrdb9vZ2y/LSEv/G/3t7fLss6Z+ys7tbdsseP7O7t1e2t3f5Gj63u7tTNjc3y9WrV8u1a1fLTvy9vbWl9+NaqyurZWNjoxw8dLAcOXykHDh4QBf3ONLvK8vLZWlpmWPb3dkru9s7pexhbHrd4yvLSxwH7rW1tVU2tzbLtWvXyrXNrbK1vVm2d7b5byl7BZdbXl4u6+trZXVtrRy/+eZy7NhRvre3u1t2trfreFZWVsva2lpZXl7ROMoShl

11:02:03 File 0 - Binary preview: ‰PNG  IHDR€
à5ÑÜä
sRGB®Îé IDATx^¤½ù³^×uxތ™@œ
Pœ)qdK”äX¶Ëq%îØ­H²l'?ÆN¥»ÿªTÿÔÝÎPNª:U]‰ǒܲHp&EŠƒhY"E0¾±k­µ×9ûœ{¿aÈýX,¼÷ ÷ž{†½×^{ZúÃoÿî^)¥,--•²·[öövËòÒÿÆÿ{{|»,韲³»[vË?³»·W¶·wù>·»»S677ËÕ«W˵kWËNü½½µ¥÷ãZ«+«ecc£<t°9|¤8x@÷8Òï+ËËeii™cÛÝÙ+»Û;¥ìalzÝã+ËKaîµµµU6·6˵k×ʵͭ²µ½Y¶w¶ùo){—[^^.ëëkeum­¿ùærìØQ¾··»[v¶·ëxVVVËÚÚZY^^Ñ8ʆRð(;»xþ²»§¿>\îûÌgʱcÇÊÊÊZùûŸþ´üÅû¯åã?»»Û¼6îyèàÁràÀróñ›ËÁCa0ùõ~¸þÖö6¯{ᣠekk³œ8q²¬®®bx±F{üŠ×(}Y¿b0{¸&>ÄIÕܦuÔÇp½çߗVðŒú[s…¹.eÏ¿W¸Æ^ï¼?*

11:02:03 File 0 - Unique file name: image_1711620123139_0.png

11:02:03 Starting processing for file at index 1

11:02:03 File 1 - Base64 string obtained

11:02:03 File 1 - Base64 preview: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAYAAAA10dzkAAAAAXNSR0IArs4c6QAAIABJREFUeF6svYmzp8d1HdZvf28WYGawDBYCs2AhAQIEQZPiBi6OlEps2dZSVlGSHUWyLUtOVZJ/KklVyhVbcVIpL7EsWyJllUliJVYSXEGsAwww+7wtdc65p/t2f9/vzTD2K6Dmvd/yff1137733HOXXvq9b/yN/f39/bK0v1eWlpbK0vJSGX/29/AKXl8qe/vt3b39/bK7t1/28frebtne3inb16+X7Z3tsr29XXZ3d8vOzk65fu1a2d3ZLrjPyvJyWV1bLRsb62VzY72sr6+VzY2Nsrq6WtbW1srK6kpZXsK99sueblz290vZ290rO7u7ZR/3298vyyvLZWV5pSwtLXNc+Oj169vl2rVr/NzO9k65du06/8ZY8LO7u1P2+ZyF9zly5HDZ3NwsGxsbZW11jdfEHO

11:02:03 File 1 - Binary preview: ‰PNG  IHDR€
à5ÑÜä
sRGB®Îé IDATx^¬½‰³§ÇuÖoof° ³!
A“â.Ž”JlÙÖRVQ’E²-KNU’IUÊ[qR)/±,["e•Ib%V\A¬ 0û¼-uι§ûvßïÍ0ö+ æ½ßò}ýuß¾÷Üs—^ú½oüýýýý²´¿W–––ÊÒòRö÷ð ^_{ûíݽýý²»·_öñúÞnÙÞÞ)Ûׯ—íí²½½]vwwËÎÎN¹~íZÙÝÙ.¸ÏÊòrY][-eeëesc½¬¯¯•Í²ººZÖÖÖÊÊêJY^½ö˞n\ö÷KÙÛÝ+;»»e÷Ûß/Ë+Ëeey¥,--s\øèõëÛåÚµküÜÎöN¹ví:ÿÆXð³»»Söùœ…÷9räpÙÜÜ,eeeemu×ÄàÁòòrYY]åœàwßKcÒD`vvw8^\óÔéSå¶Ûo/«+«åwÞ.ßü֟—7ß|£\»z)ëëeåèÑ[ʉ·ñߍõM^có\âyvvvˇ~X®^½ZŽ9Z¶67Ëêê Ǐÿy1Ì|¬Ç>ÑežE?KœC®/ç ŸÁuôùö9ü®¥Æó

11:02:03 File 1 - Unique file name: image_1711620123295_1.png

11:02:03 Upload failed for file 0:image_1711620123139_0.png {"stack":"Error: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.\n at r (/runtimeWidgets.f5cdc453.js:1:340942)\n at g (/runtimeWidgets.f5cdc453.js:1:338698)\n at l (/runtimeWidgets.f5cdc453.js:1:12691)\n at eval (/runtimeWidgets.f5cdc453.js:1:13533)\n at Ra._handleQueryResponse (/runtime.24714497.js:2:409363)\n at Object.handleResponse (/runtime.24714497.js:2:418600)\n at eval (/runtime.24714497.js:2:327647)\n at async _ (/runtime.24714497.js:2:325307)"}

11:02:03 upload_gcloud failed (0.539s):Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

11:02:03 Upload failed for file 1:image_1711620123295_1.png {"stack":"Error: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.\n at r (/runtimeWidgets.f5cdc453.js:1:340942)\n at g (/runtimeWidgets.f5cdc453.js:1:338698)\n at l (/runtimeWidgets.f5cdc453.js:1:12691)\n at eval (/runtimeWidgets.f5cdc453.js:1:13533)\n at Ra._handleQueryResponse (/runtime.24714497.js:2:409363)\n at Object.handleResponse (/runtime.24714497.js:2:418600)\n at eval (/runtime.24714497.js:2:327647)\n at async _ (/runtime.24714497.js:2:325307)"}

11:02:03 upload_gcloud failed (0.486s):Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

Here is the resource upload query:

[Paulo]

Hi @takeitpersonally.app, welcome to the forum!
Try this workaround from @retool_team to convert the blob to base64, it works like a charm!
​