Downloading Files from an API Using JavaScript | CodeSignal Learn

Downloading Files from an API Using JavaScript | CodeSignal Learn

Downloading Files from an API

Welcome back! Today's focus will be on downloading files from an API . Understanding how to retrieve files efficiently not only enhances your technical skills but also broadens your application's capabilities. In this lesson, we'll explore a practical scenario using our To-Do list API, which, in addition to managing tasks, supports handling text files such as notes. These notes can be downloaded or uploaded through the /notes endpoint, allowing functionality for storing supplementary information. For example, users might keep notes about a meeting or important reminders. By understanding how to interact with this endpoint, you can effectively manage notes within your application. By the end of this lesson, you'll know how to request a file from an API, save it locally, and verify its contents. Let's dive into downloading files with precision and confidence!

Basic File Download with GET Requests

GET requests are fundamental for retrieving files from an API. When you send a GET request using fetch, your client communicates with the server at a specified URL, asking it to provide the file. The server responds with the file data, if available and permissible, along with an HTTP status code (like 200 OK). Here's a basic example of downloading a file named welcome.txt from our API at http://localhost:8000/notes. This approach downloads the entire file at once, which is manageable for smaller files. JavaScriptconst fs = require('fs'); // Base URL for the API const baseUrl = "http://localhost:8000"; // Specify the note name to download const noteName = "welcome.txt"; fetch(`${baseUrl}/notes/${noteName}`) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.arrayBuffer(); }) .then(data => { try { // Save the file locally fs.writeFileSync(`downloaded_${noteName}`, Buffer.from(data)); console.log('File downloaded successfully'); } catch (error) { console.log('Error writing the file:', error.message); } }) .catch(error => { console.log('Error downloading the file:', error.message); }); This code sends a GET request and writes the full response content to a local file. This method works well for small files but can strain memory for larger files.

Leveraging GET Requests and Streaming

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Verification of Downloaded File Content

Once you've downloaded a file, it's imperative to verify its contents to ensure a successful transfer. In our example, after downloading, you can open the file and print its content to confirm data integrity: const fs = require('fs'); // Open and read the downloaded file to verify its content try { const content = fs.readFileSync(`downloaded_${noteName}`, 'utf8'); console.log(content); } catch (err) { console.log('File error occurred:', err.message); } If everything is functioning correctly, you should see an output similar to: Welcome to Your Notes! 📝 This is a sample note that comes with the application. This step is essential for data verification. The familiar error-handling techniques come into play once more, using try-catch blocks to gracefully address any issues during the download and verification process.

When dealing with large files, downloading them all at once can be inefficient and strain memory. To address this, you can use the ReadableStream API to handle streaming. This approach leverages HTTP's built-in capabilities to download files in chunks, thus optimizing memory usage and maintaining efficiency.

Below is a detailed code example demonstrating how to download the same file using streaming with fetch:

JavaScript

const fs = require('fs');

// Base URL for the API
const baseUrl = "http://localhost:8000";

// Specify the note name to download
const noteName = "welcome.txt";

fetch(`${baseUrl}/notes/${noteName}`)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    // Create a write stream to save the file
    const fileName = `downloaded_${noteName}`;
    const writer = fs.createWriteStream(fileName);

    // Use the ReadableStream to pipe the response data to the file
    const reader = response.body.getReader();
    const pump = () => reader.read().then(({ done, value }) => {
      if (done) {
        console.log('File downloaded successfully');
        return;
      }
      writer.write(Buffer.from(value));
      return pump();
    });

    return pump();
  })
  .catch(error => {
    console.log('Error downloading the file:', error.message);
  });

By utilizing streaming, even large files are downloaded efficiently. This technique is especially useful when file sizes increase.

JavaScript

const fs = require('fs');

// Open and read the downloaded file to verify its content
try {
  const content = fs.readFileSync(`downloaded_${noteName}`, 'utf8');
  console.log(content);
} catch (err) {
  console.log('File error occurred:', err.message);
}