getDataByObjectURL fails when running as a PWA, works in the editor

Mobile
1

I've been working on setting up an upload of images taken using the Image Input component.

My content API is a REST API that expects a FormData file. I've managed to get it working in the editor using this code:

var b64Image = await utils.getDataByObjectURL(productPhotoInput.value[index]);
  
  var file =  {
        name: "app_upload_" + Date.now() + "." + productPhotoInput.files[index].type.split("/")[1],
        size: productPhotoInput.files[index].size,
        type: productPhotoInput.files[index].type,
        lastModified: Date.now(),
        data: b64Image.replaceAll("data:image/png;base64,", "") //This needs to be removed to match the formdata format
      };

... but when uploading from my actual Phone, running the app in the Retool App, the image file is corrupt.

Could the getDataByObjectURL function return different results when the app is running as a PWA inside the Retool app?? I find this hard to debug with the tools I have.

2

Hey @Oyvind_Byhring!

Doing some basic testing with this app I'm seeing a image/png datatype in the PWA but application/octet-stream in the native app. Does that align with what you're seeing?

Could you share what device you're using as some extra context here as well?

3

That sounds like it could be the source of the problem yes.

The device is an iPhone 11.

The optimal solution to this would be if I could use the files from the Image Input directly in the REST FormData query without having to combine metadata and file info manually of course :pray:

Something like this:

image
image1524×222 13.9 KB

4

Got it, I've let the dev team know and they'll look into having more consistent behavior from the image input component and getDataByObjectURL!

If you parse out the base64 data using a more generic selector (e.g. b64Image.replace(/^data:.+;base64,/, "") does it work for now?

5

Yes, that works, thanks :slight_smile: