In this article, we will learn how to download multiple files in ZIP format in Angular 9.


  • Basic knowledge of Angular
  • Code editor like Visual Studio Code

Create a new Angular project by typing the following command in the VSCode terminal.

ng new download-zip

Now, open the newly created project and execute the commands given below.

npm install jszip
npm install file-saver


jszip is a javascript library used to create, read, and edit .zip files.


file-saver is a javascript library used to save files on the client-side.

Open the app.module.ts file and add the code in it.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Open the app.component.html file and add the code in it.

<textarea [(ngModel)]='title' name="title" rows="5" cols="50"></textarea>
<input type="file" (change)="handleFileInput($" multiple>
<button (click)="download()">Download</button>

Open the app.component.ts file and add the code in it.

import { Component } from '@angular/core';
import * as JSZip from 'jszip';
import * as FileSaver from 'file-saver';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {


  handleFileInput(files) {
    this.uploadFiles = files;

  download() {
    var zip = new JSZip();
    zip.file("Title.txt", this.title);
    var imgFolder = zip.folder("images");
    for (let i = 0; i < this.uploadFiles?.length; i++) {
      imgFolder.file(this.uploadFiles[i].name, this.uploadFiles[i], { base64: true });
    zip.generateAsync({ type: "blob" })
      .then(function (content) {
        FileSaver.saveAs(content, "");

In the above example, it will create a zip named ‘‘. With one text file named ‘Title.txt‘ and one folder named ‘images‘ which may contain images uploaded by the user.


Please give your valuable feedback and if you have any questions or issues about this article, please let me know.

Also, check Datepicker In Angular 9

Footer Logo


Select Categories