Daily Dev Problem: Downloading Images from an API and Handling Binary Data Correctly in JavaScript

When working with APIs, there may be situations where you need to download images or other binary files. The process can sometimes be tricky, especially when dealing with binary data in JavaScript. In this blog post, we'll explore a real-world problem that involves downloading an image from an API and handling the binary data correctly.

The Issue

We encountered a problem where we needed to download an image from an API and save it to the user's device. The API returned the image data in binary format, but when we tried to save the file, it was corrupted and couldn't be opened with an image viewer.

The Solution

After some investigation, we discovered that the issue was related to the character encoding of the binary data. When working with binary data, it's crucial to handle it correctly to avoid data corruption. In our case, we used the popular axios library for making HTTP requests, which required a few additional configurations to handle binary data.

Here's the step-by-step solution:

1. Set the Accept header to the desired MIME type (e.g., 'image/png' for a PNG image).
2. Set the responseType to 'blob' to ensure that axios handles the binary data correctly.
3. Create a new Blob instance with the received data and generate a URL using window.URL.createObjectURL.
4. Create an anchor element, set the URL as its href, and add a download attribute with the desired file name.
5. Append the anchor element to the document body, trigger the click event to start the download, and remove the anchor element afterward.

Here's the final code:

async function downloadImage() {
  const response = await axios.get(IMAGE_ENDPOINT, {
    headers: {
      Accept: 'image/png',
    },
    responseType: 'blob', // Set the responseType to 'blob'
  });

  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'some_file_name.png');
  document.body.appendChild(link);
  link.click();
  link.remove();
}

downloadImage();

Conclusion

Handling binary data correctly in JavaScript can be challenging, but with the right configurations and understanding of how binary data works, it's possible to download images and other binary files from APIs without issues. By setting the appropriate responseType and using Blob instances, we can ensure that the binary data is preserved, and the downloaded files are not corrupted.