How to Generate ZIP with File Links in Next JS and React JS

We have an API which serves us some file data. The API includes an array of objects and each object includes a file link, file name and file format. The file can be a png, jpg or pdf. Now we want to download a zip file after clicking a button. The zip file will include all the files in the API. So Let’s Generate ZIP with file links in Next JS on in React JS.

You can find the code on GitHub. You can also check the Demo of this project.

Generate ZIP with file links in Next JS

1. First we will Create a Next JS app from starch. To create a new Next JS app use the following command. Make sure you have Node JS installed on your machine and also npm or yarn installed. And after installing the Next JS app navigate to your project directory.

npx create-next-app zip-download-next-js
#or
yarn create-next-app zip-download-next-js

cd zip-download-next-js 

2. For the zip-generating process we have to install a package named jszip and for the zip-downloading process, we will install the file-saver package. So let’s install them first

npm install jszip file-saver 

3. For this we are going to create our own API. Next JS can also be used to create API. This will be a simple API where we will serve an array of objects. Each object will have a name, file URL and type of file. The API file will be at /pages/api/files.js. So here is the sample API. You can use your file URLs.

// /pages/api/files.js
export default function handler(req, res) {
  res.status(200).json([
    {
      name: "laptop",
      url: "https://res.cloudinary.com/dbxcernxw/image/upload/v1674379837/Mridul.Tech%20Blog/pexels-laptop_tfnlrg.jpg",
      type: "jpeg",
    },
    {
      name: "coding-react-js",
      url: "https://res.cloudinary.com/dbxcernxw/image/upload/v1674379837/Mridul.Tech%20Blog/pexels-react-code_gkeio5.jpg",
      type: "jpeg",
    },
    {
      name: "coding-python",
      url: "https://res.cloudinary.com/dbxcernxw/image/upload/v1674379837/Mridul.Tech%20Blog/pexels-python-code_qau1ba.jpg",
      type: "jpeg",
    },
    {
      name: "coding-pdf",
      url: "https://zip-download-next-js.vercel.app/assets/photos-pdf.pdf",
      type: "pdf",
    },
  ]);
}

4. Now on our home page we are going to call this API in a useEffect and save the data with useState hook. We are calling our API /api/files in the getFiles functions and also called the function in the useEffect. After that, we are saving the response with setFiles.

import React, { useEffect, useState } from "react";

export default function Home() {
  const [files, setFiles] = useState(null);
  const [loading, setLoading] = useState(false);

  const getFiles = async () => {
    const res = await fetch("/api/files");
    const files = await res.json();

    setFiles(files);
  };

  useEffect(() => {
    getFiles();
  }, []);

  return <div></div>;
}

Also Read: 10 React Project Ideas to Boost Your Portfolio

5. Now let’s fetch the file URLs and get the files. We will map over the array and fetch each file from the object. And we can also name the files different name as well.

// /pages/index.js
import JSZip from "jszip";

const zip = new JSZip();
const remoteZips = files.map(async (file) => {
  const response = await fetch(file.url);
  const data = await response.blob();
  zip.file(`${file.name}.${file.type}`, data);

  return data;
});

6. After that we can ZIP the files with zip.generateAsync and we can also set a name for them. In this example, we have used zip-download-next-js.zip name.

Promise.all(remoteZips)
  .then(() => {
    zip.generateAsync({ type: "blob" }).then((content) => {
      // give the zip file a name
      saveAs(content, "zip-download-next-js.zip");
    });
    setLoading(false);
  })
  .catch(() => {
    setLoading(false);
  });

Also Read: Next JS Project Ideas to Boost Your Portfolio

7. Now look at the full home page code. For the download function, we have created the downloadResourcesOnClick function. All the file fetching and downloading stuff are here. We have added one button in the UI and the onClick for this button is the download function.

import React, { useEffect, useState } from "react";
import Head from "next/head";
import JSZip from "jszip";
import { saveAs } from "file-saver";

import styles from "../styles/Home.module.css";

export default function Home() {
  const [files, setFiles] = useState(null);
  const [loading, setLoading] = useState(false);

  const getFiles = async () => {
    const res = await fetch("/api/files");
    const files = await res.json();

    setFiles(files);
  };

  useEffect(() => {
    getFiles();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const downloadResourcesOnClick = async () => {
    setLoading(true);
    try {
      const zip = new JSZip();
      const remoteZips = files.map(async (file) => {
        const response = await fetch(file.url);
        const data = await response.blob();
        zip.file(`${file.name}.${file.type}`, data);

        return data;
      });

      Promise.all(remoteZips)
        .then(() => {
          zip.generateAsync({ type: "blob" }).then((content) => {
            // give the zip file a name
            saveAs(content, "zip-download-next-js.zip");
          });
          setLoading(false);
        })
        .catch(() => {
          setLoading(false);
        });

      setLoading(false);
    } catch (error) {
      setLoading(false);
    }
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>Generate ZIP with file links in Next JS</title>
        <meta
          name="description"
          content="How to generate ZIP with file links in Next JS and React JS"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Generate ZIP with file links in Next JS
        </h1>

        <button
          onClick={downloadResourcesOnClick}
          className={styles.button}
          disabled={loading}
        >
          Download The Zip
        </button>
      </main>
    </div>
  );
}

You can find the code on GitHub. You can also check the Demo of this project. Here is the screenshot of the UI for the Next JS project.

Download ZIP in React JS

The download function for a React JS project will be the same as Next JS. We can use the same packages for this as well. But we need to create the API separately here. Although we can use the Next JS API for the API creation process and use the API in the React JS project