Saving Images In Node.js: Using Fetch with arrayBuffer() and Buffer

A quick example on the hurdles of binary buffers in JavaScript!

Posted on June 4, 2020


The idea behind this post presented itself to me when I realized nobody had the full A to Z example of saving an image via some binary data.

In my case, I wanted to save an image from an API. Most examples in Node.js I found on the web were turning around and directly creating an <img> element and setting the src with base64 string or something like that. In my case, I wanted to save the API response directly as an image file. The process is:

  • call arrayBuffer() on the fetch response object.
  • convert the ArrayBuffer object to a Buffer object with Buffer.from()
  • save the file via fs.createWriteStream() and write() the Buffer object

I also used the nice file-type package to attempt to determine the file type of the image, since the API doesn't tell you 🤷‍♂️  1.

So, here's the full code example:

import fs from "fs";
import fetch from "node-fetch";
import FileType from "file-type";

const API_URL_HERE = "your-api-url.whatever";

async function savePhotoFromAPI() {
    const response = await fetch(API_URL_HERE);
    const arrayBuffer = await response.arrayBuffer();
    const buffer = Buffer.from(arrayBuffer);
    const fileType = await FileType.fromBuffer(buffer);
    if (fileType.ext) {
        const outputFileName = `yourfilenamehere.${fileType.ext}`
    } else {
        console.log('File type could not be reliably determined! The binary data may be malformed! No file saved!')



  1. Further more, even in 2020, there is no accepted standard for many file types. Wikipedia states: Since there is no standard list of extensions, more than one format can use the same extension, which can confuse both the operating system and users. Yep, a real pain.  

Next / Previous Post:

Or find more posts by tag:

-~{/* */}~-