Javascript JSZip Example to Compress Multiple Files Using HTML5 Form & Download it as ZIP File

Welcome folks today in this blog post we will be compressing multiple files which are selected using html5 form by the user and then downloaded it as a zip file. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>
<body>
    <input type="file" id="files" multiple required>
    <button onclick="download()">Compress & Download ZIP File</button>
</body>
<script src="script.js"></script>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<button onclick="download()">Compress & Download ZIP File</button>

</body>

</html>

As you can see we are including the jszip and filesaver.js library cdn library. And then inside the html we have the input field where we allow the user to select multiple files and then we have the button to compress and download it as zip file. And also we have binded a onclick event listener to call download() method.

Now we need to write the javascript code as shown below

function download(){
    let zip = new JSZip()

    let files = document.getElementById('files')

    console.log(files.files)

    Array.from(files.files).forEach((f,i) => {
        zip.file(f.name,f)
    })

    zip.generateAsync({type:'blob'})
    .then((content) => {
        saveAs(content,"output.zip")
    })
}

function download(){

let zip = new JSZip()

let files = document.getElementById('files')

console.log(files.files)

Array.from(files.files).forEach((f,i) => {

zip.file(f.name,f)

})

zip.generateAsync({type:'blob'})

.then((content) => {

saveAs(content,"output.zip")

})

}

As you can see in the above function we are making a new zip file and inside it we are using the foreach loop to add every file that the user selected using the html5 form. And lastly we are downloading the zip file as an attachment inside the browser using saveAs() method.