Axios — Download Files & Images in Node.js

Axios is a promise-based HTTP client for the browser and Node.js. It has a convenient and modern API simplifying asynchronous HTTP request and response handling. Let’s explore how to download files with Axios in Node.js.

Axios Series Overview

  1. Download Files & Images in Node.js

Axios File Download in Node.js

This tutorial is specifically for Node.js, because you’ll stream the image to a file on the disc. The streaming option isn’t supported in Axios when using the library in the browser. There you’d use the blob response type.

Select a File to Download

You need an accessible Internet URL linking to the resource to download a file. To illustrate the actual download implementation in Axios, let’s use the following “coding” picture from Markus Spiske which is publicly available on Unsplash.

You can access this image without restriction and even download it without registration.

Sample “code” image

The image example doesn’t mean you can’t download other file formats. It’s for illustration purposes and an image is visually appealing because you can look at it when opening the file on your hard disc.

Alright, you have a sample image and the related download URL. Let’s implement the actual download functionality.

Implement the Axios File Download in Node.js

The Axios initialization to request a file is equal to a request that expects another response payload format, like JSON. To download a file, explicitly define responseType: 'stream' as a request option. This tells Axios to provide the response.data as a readable stream.

From there, pipe the read-stream into a Node.js write-stream that points to a file on your local disc. This will pass the incoming bytes from your read-stream to the write-stream and ultimately flush every piece of the image to a local file.

Here’s a sample function to download an image:

'use strict'

const Fs = require('fs')  
const Path = require('path')  
const Axios = require('axios')

async function downloadImage () {

  const url = 'https://unsplash.com/photos/AaEQmoufHLk/download?force=true'
  const path = Path.resolve(__dirname, 'images', 'code.jpg')

  // axios image download with response type "stream"
  const response = await Axios({
    method: 'GET',
    url: url,
    responseType: 'stream'
  })

  // pipe the result stream into a file on disc
  response.data.pipe(Fs.createWriteStream(path))

  // return a promise and resolve when download finishes
  return new Promise((resolve, reject) => {
    response.data.on('end', () => {
      resolve()
    })

    response.data.on('error', () => {
      reject()
    })
  })

}

await downloadImage()  

This function defines a static URL and path to the local image file. You could pass both variables as function parameters to create a more general download method.

Initialize the Axios instance with the related HTTP method, URL and the mentioned stream value for the response type.

Wrapping the method’s response into a promise allows you to wait for the file to complete the download.

Because you’re using a stream as the response type, you want to wait for every byte of the incoming file. Do that by listening to the stream’s end event. This signals a successful data transmission. At this point, resolve the promise to complete the file transfer.

To recognize error situations, listen for the error event as well. The readable stream might signal the error event in situations like the underlying data flow interrupted. Handle this scenario as well.

Summary

Axios has great support for file downloads. If you’re an avid user of Axios, you can recognize that the response type differs from a regular json request.

Adjust the file download with Axios to your needs. We love to hear your thoughts and ideas. Tell us how you download files with Axios in the comments below or tweet us @futurestud_io.


Mentioned Resources

Explore the Library

Find interesting tutorials and solutions for your problems.