Downloading WebP Images as Jpg

[brpark]

Hi Retool Team,So, what I'm doing is using the follow downloadFile util to do this.

1. My goal:
   I want to be able to download my images that are webp images.

2. Issue:
   I'm not able to download / save the image as anything but text.

3. Steps I've taken to troubleshoot:
   I am using a photo-grid component from retool and I do see my images pop up as I'm passing my base64 data in. I've tried to just download or save my image as something else, but it's always text. I've also tried to utilize the utils.downloadFile function to convert and download my image as jpg. The download succeeds but the file doesn't seem to open properly. Also, I do see that the base64 data is getting passed into my query correctly.

4. Additional info: (Cloud or Self-hosted, Screenshots)
   I am cloud hosted and I'm using the s3 resource query to put new images into my s3 bucket. And I'm pulling them based on their s3 keys successfully.

[WidleStudioLLP]

Hi @brpark, welcome to the Retool Community!

You can download your base64-encoded images using the utils.downloadFile() utility. If your base64 string includes the prefix (like data:image/webp;base64,), you’ll want to remove it before downloading. Here's a sample implementation:

utils.downloadFile({
  base64Binary: imageGrid1.data[0].src.includes(',') 
    ? imageGrid1.data[0].src.split(',')[1] 
    : imageGrid1.data[0].src,
  fileName: 'image.jpg' 
});

This will correctly decode the base64 image and trigger a file download.

Here are a reference screenshots for clarity:

[brpark]

Thank you so much @WildleStudioLLP! That worked flawlessly