Trouble with Downloading and Opening a Zip File from API Response

  • Goal: I am trying to download and open a zip file from an API response in Retool. The expected behavior is to successfully download the zip file and open it without errors. However, the downloaded zip file cannot be opened as it seems to be corrupted.

  • Steps: I have set up an API that sends a zip file in a base64 encoded format. In Retool, I use the following script to trigger the download when the API response is received:

    utils.downloadFile(atob(GenerateQrCodes.data.base64Data), GenerateQrCodes.data.name, GenerateQrCodes.data.type.split('/')[1]);
    

    This script successfully triggers the download, but the resulting file cannot be opened and appears to be corrupted.

  • Details: Here’s the relevant part of the script used for downloading the file:

    utils.downloadFile(atob(GenerateQrCodes.data.base64Data), GenerateQrCodes.data.name, GenerateQrCodes.data.type.split('/')[1]);
    

    No error messages are displayed in the console, but the file just won't open properly. I suspect there might be an issue with how the base64 data is decoded or how the file is being downloaded.

  • Screenshots: [Attach any relevant screenshots here that might help in diagnosing the issue.]

  • App json export: Unfortunately, I cannot provide a JSON export of the app due to sensitive data constraints.

Any suggestions or insights into what might be going wrong would be greatly appreciated!

Hello @Leo_Lhuile!

I am sorry you are having these issues with the zip being corrupted, very odd bug. It seems like you are using the right functions to grab the data and convert it to a processable format.

I can try to repro this and see if I am getting the same error. If so I can check with our engineering team to see why the utils.downloadFile() isn't working and see if we have a workaround or another method for using such with atob().

On a side note, I found another user with a similar post, where another community member had a recommendation for using JS libraries tmp with fs! Let me know if that works for you :crossed_fingers:

I found a solution using the utils.downloadFile function that might be useful for others:
The first argument for utils.downloadFile can directly receive an object with the base64 encoded binary data (base64Binary). So I modified my script to:

utils.downloadFile(
  { base64Binary: GenerateQrCodes.data.base64Data },
  GenerateQrCodes.data.fileName,
  GenerateQrCodes.data.type.split('/')[1],
);

This wasn't indicated in the documentation, and it might be beneficial to add this detail to help others who are looking to handle binary data directly.

Anyway, thanks for your time and your solution! :slightly_smiling_face:

@Leo_Lhuile So happy you got it working!

Thanks a ton for sharing, I will tell our docs team to add this example to the docs to further assist future users :tada: