Return JSZip zip file in React

Active3 hr before
Viewed126 times

7 Answers


As the zip creation is async the code handling it also needs to be async. Make your createURL handler async and await the zip inside of it:,Generally speaking if an async function returns something the code using it also needs to be async.,Connect and share knowledge within a single location that is structured and easy to search.

As the zip creation is async the code handling it also needs to be async. Make your createURL handler async and await the zip inside of it:

const createURL = useCallback(async (node, reportHeight, reportWidth, imgHeight) => {
         try {
            const dataUrl = await domtoimage.toJpeg(node, {
               width: reportInViewerRef.current.offsetWidth,
               height: reportInViewerRef.current.scrollHeight
         } catch (error) {
            return console.error('oops, something went wrong!', error);

         // ... you can use dataUrl from here

         let base64pdf = await getZip(btoa(fileName, pdf.output()));

         // ... do something with the zip file

Then let’s implement the onChangeFile method to zip the inputed files.,First let’s implement a button to upload multiple files.,Then to generate the completed zip file.

First let’s implement a button to upload multiple files.

<input multiple type="file" name="file"        onChange={this.onChangeFile}/>

First we have to install the npm package.

npm install jszip

For the zip functionality you have to use following function.

zip.file(file - name, file)

Then to generate the completed zip file.

         type: "blob})   .then(content => {         // code        });

Let’s go to the code.

const onChangeFile = () => {
      const zip = require('jszip')();
      let files =;
      for (let file = 0; file <; file++) { // Zip file with the file name.    zip.file(files[file].name, files[file]);  }   zip.generateAsync({type: "blob"}).then(content => {    saveAs(content, "");  });}

saveAs is taken from the file-saver package in npm and if you need to send that zip file to the backend then you need to pass that content as the body as follows.

      type: "blob"
   }).then(content => {, content).then( //code );});
load more v

An instance of JSZip represents a set of files. You can add them, remove them, modify them. You can also import an existing zip file or generate one.,On this instance, we can add (and update) files and folders with .file(name, content) and .folder(name). They return the current JSZip instance so you can chain the calls.,The first step is to create an instance of JSZip :

var JSZip = require("jszip");
load more v

A library for creating, reading and editing .zip files with JavaScript, with a lovely and simple API.,See for all the documentation.

var zip = new JSZip();

zip.file("Hello.txt", "Hello World\n");

var img = zip.folder("images");
img.file("smile.gif", imgData, {
   base64: true

   type: "blob"
}).then(function(content) {
   // see FileSaver.js
   saveAs(content, "");

Results in a zip containing

superagentelegant & feature rich browser / node HTTP with a fluent API

task.plugin('zip', {
   every: false
}, function*(files, opts) {
   opts = Object.assign({
      file: ''
   }, opts);

   let curr;
   for (const file of files) {
      if ( {
         curr = p.relative(task.root, p.format(file));
         zip.file(curr,, {
            base64: true

   const outdata = yield zip.generateAsync({
      type: 'nodebuffer'

   // if an alt `dest` was given
   if (opts.dest !== void 0) {
      // write file without overwriting files
      const outfile = p.resolve(task.root, opts.dest, opts.file);
      yield utils.write(outfile, outdata);
   } else {
      // overwrite with the archive
      this._.files = [{
         dir: files[0].dir,
         base: opts.file,
         data: outdata
load more v

Here, we create a dummy React component Zip to give us an easy way to trigger a call to our /zip endpoint back on the server. Using the function component pattern, we render a simple <h4></h4> tag along with a button that will trigger our download when clicked.,First, let's wire up a new Express.js endpoint in the server that we can call from the client to trigger the download of our zip archive:,Last step on the server. With our zip complete, now we update our exported function to use the async keyword and then call to await zip.generateAsnyc() passing { type: 'base64' } to it to signify that we want to get back our zip file in a base64 string format.

 Pretag team - issue, fix, solve, resolve

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Pretag team - issue, fix, solve, resolve

Other "react-return" queries related to "Return JSZip zip file in React"