Generate a Zip File Programmatically with Javascript & React

Samuele ZazaAPI, Tutorials, Working with Filepicker, Working with Filestack0 Comments

tt

Zip files are ubiquitous files on the net. We use them frequently when sending an e-mail or downloading a program.

What is a zip file? It’s an archive format which contains one or several files in a compressed form in order to reduce the overall size of the file.

This is not a new technology. The zip format was invented in 1986 by Phillip Katz and it was first implemented with the PKZip program for Katz’s company, PKWare, Inc. Eventually it was widely adopted by the majority of operating systems.

The zip format has the following advantages:

  • You save up to 80 percent or more of storage space.
  • Smaller attachments size drastically reduces e-mail transmission time.
  • Zipping allows you to encrypt private data.

However all that glitters ain’t gold, sometimes damaged data can entirely affect the zip file with no possibility to extract the files.

Luckily, failures like this are rare, so zipping files remains a popular option when handling smaller files.

An API to zip files is another file transformation provided by the Filestack API.  It allows you to zip a single file or multiple files.

Let’s take a look at the syntax!

Generate the Zip File

Filestack’s transformation engine is able to generate zip files.  What does that mean?

Basically, we use the process API we have seen in other blog posts.
The request to generate the zip file comes from the zip parameter in the URL.

This is the recommended way shown in the documentation:

Zip Task URL Format:

https://process.filestackapi.com/zip/[Array_of_Filestack_Handles and URLS]

or

https://process.filestackapi.com//zip/[Array_of_Filestack_Handles and URLS]

The are no additional parameters.

Let me show you an example.

Consider the following picture I uploaded on Filestack:

https://cdn.filestackcontent.com/vumNEubaQUaSpUmn7Gcg

Filestack s Transformations

To generate a zip file this is the new URL:

https://process.filestackapi.com/zip/vumNEubaQUaSpUmn7Gcg

It’s very useful to let users download the file.

Download Picture

Zipping the Pictures with React

As usual, you can play with the app I made with React, you can find it on my github:

The pictures uploaded in the sample app can be downloaded as well.  To do so I used the zip process API of Filestack.

Filestack s Transformations

In the app, there is a Download button:

Filestack s Transformations2

Implementing this in React is very simple to achieve.  Once you have cloned the repository open: /src/components/Thumbnail.jsx:

import React from 'react';

const Thumbnail = ({ title, handle, url }) => {
 const completeUrl = `${url}/${handle}`;
 return (
   <div className="col-md-4">
     <div className="thumbnail">
       <div className="thumbnail-img">
         <a href={completeUrl} target="_blank">
           <img src={completeUrl} />
         </a>
       </div>
       <div className="caption">
         <h3>{title}</h3>
         <div className="text-right">
         <a
            className="btn btn-primary filestack-secondary"
            href={`${url}/zip/${handle}`}
            role="button"
         >
         Download
         </a>
       </div>
     </div>
   </div>
 </div>
 );
};

export default Thumbnail;

The Thumbnail component renders the single picture, the title and download button. It’s merely a presentation component because the zip transformation is a simple string concatenation.

The anchor element for Download shows the structure in the href attribute:

href={`${url}/zip/${handle}`}

where

  • url is the CDN URL plus the manipulation string.
  • /zip requests the Filestack API to compress the file.
  • handle is the Filestack handle of the image to ZIP.

That’s it. Now you’ve seen how to programmatically ZIP a file using the Filestack API.

Want to learn more?

Here is a complete list of image transformations supported by Filestack.

Compress
Image to Ascii
Facial Detection
Crop
Rotate
Border and Effects
Filters
Collage
Image Enhancements
URL Screenshot
Image to ASCII
File type conversions
Security

See you next time!