Nico Jonsson

Nico Jonsson

1585017766

How to Download Multiple Files as a .Zip File using Angular

This article helps you to download multiple files as a zip file using Angular and SharePoint Online.

Prerequisites

  1. Download and Install Node from Node
  2. Install and create an Angular project using Angular CLI from here: Angular CLI
  3. Create a document library and upload the sample files in it.

This is image title

To create the zip file in Angular, the way we were required to for the js zip library file.

npm i jszip  

To save the file on the client-side, we are required to file-save the library file.

npm i file-saver 

Create a component(FileDownloaderClient) in Angular for downloading the file on the client side.

 g c File/FileDownloaderClient  

To show the files in the browser, PrimeNG table has been used. To know more details about PrimeNG, refer here.

Now the file-downloader-client.component.html will look like the following:

<p-table [value]="filesArray">  
    <ng-template pTemplate="header">  
        <tr>  
            <th>Sr.No</th>  
            <th>  
                File Name  
            </th>  
        </tr>  
    </ng-template>  
    <ng-template pTemplate="body" let-item let-rowIndex="rowIndex">  
        <tr>  
            <td>{{rowIndex + 1}}</td>  
            <td>  
                <a href={{item.FileRef}}>{{item.FileLeafRef}}</a>  
            </td>  
        </tr>  
    </ng-template>  
</p-table>  
<p-button label="Download" type="button" (click)="downloadFile()"></p-button>  

Import the install library in file-downloader-client.component.ts

import * as JSZip from 'jszip';  
import * as FileSaver from 'file-saver';  

The complete file-downloader-client.component.ts will look like:

import { Component, OnInit } from '@angular/core';  
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';  
import * as JSZip from 'jszip';  
import * as FileSaver from 'file-saver';  
import { TableModule } from 'primeng/table';  
import { GlobalServicesService } from 'src/app/services/global-services.service';  
@Component({  
  selector: 'app-file-downloader-client',  
  templateUrl: './file-downloader-client.component.html',  
  styleUrls: ['./file-downloader-client.component.css']  
})  
export class FileDownloaderClientComponent implements OnInit {  
  jsonHeader = 'application/json; odata=verbose';  
  headersOld = new Headers({ 'Content-Type': this.jsonHeader, Accept: this.jsonHeader });  
  headers = { 'Content-Type': this.jsonHeader, Accept: this.jsonHeader };  
  filesArray: [];  
  showFileArray: [];  
  constructor(  
    private httpClient: HttpClient,  
    private globalService: GlobalServicesService  
  ) { }  
  ngOnInit() {  
    this.getFilesFromLibrary();  
  }  
  async readFiles(listName: string, options?: any) {  
    let res;  
    const url = this.globalService.sharePointPageObject.webAbsoluteUrl + '/_api/web/lists/GetByTitle(\'' + listName + '\')/items?$select=FileRef,FileLeafRef';  
    res = await this.httpClient.get(url, this.getHeaders(true, true)).toPromise().catch((err: HttpErrorResponse) => {  
      const error = err.error;  
      return error;  
    });  
    return this.parseResults(res);  
  }  
  parseResults(res) {  
    if (res) {  
      if (res.hasOwnProperty('d') && res.d.hasOwnProperty('results')) {  
        return res.d.results;  
      } else if (res.hasOwnProperty('error')) {  
        const obj: any = res.error;  
        obj.hasError = true;  
        return obj;  
      } else {  
        return {  
          hasError: true,  
          comments: res  
        };  
      }  
    } else {  
      return {  
        hasError: true,  
        comments: 'Check the response in network trace'  
      };  
    }  
  }  
  getHeaders(bAddContext, returnOp) {  
    const headerCopy: any = Object.assign({}, this.headers);  
    if (bAddContext) {  
      const context: any = document.getElementById('__REQUESTDIGEST');  
      if (context) {  
        headerCopy['X-RequestDigest'] = context.value;  
      }  
    }  
    if (returnOp) {  
      const httpOptions = {  
        headers: new HttpHeaders(headerCopy)  
      };  
      return httpOptions;  
    } else {  
      return headerCopy;  
    }  
  
  }  
  
  async getFilesFromLibrary() {  
    const results = await this.readFiles('Test_ABC');  
    this.filesArray = results;  
    console.log(results);  
  }  
  downloadFile() {  
    this.createZip(this.filesArray.map(c => c.FileRef), 'Sample');  
  }  
  async getFile(url: string) {  
    const httpOptions = {  
      responseType: 'blob' as 'json'  
    };  
    const res = await this.httpClient.get(url, httpOptions).toPromise().catch((err: HttpErrorResponse) => {  
      const error = err.error;  
      return error;  
    });  
    return res;  
  }  
  async createZip(files: any[], zipName: string) {  
    const zip = new JSZip();  
    const name = zipName + '.zip';  
    // tslint:disable-next-line:prefer-for-of  
    for (let counter = 0; counter < files.length; counter++) {  
      const element = files[counter];  
      const fileData: any = await this.getFile(element);  
      const b: any = new Blob([fileData], { type: '' + fileData.type + '' });  
      zip.file(element.substring(element.lastIndexOf('/') + 1), b);  
    }  
    zip.generateAsync({ type: 'blob' }).then((content) => {  
      if (content) {  
        FileSaver.saveAs(content, name);  
      }  
    });  
  }  
}  

Now run npm run start in terminal and browse http://localhost:4200/#/fileDownload to view the file on the browser.

Click on the download button to download the file as a zip folder.

Thank you for reading!

#angular #node-js

What is GEEK

Buddha Community

How to Download Multiple Files as a .Zip File using Angular

I am Developer

1597559012

Multiple File Upload in Laravel 7, 6

in this post, i will show you easy steps for multiple file upload in laravel 7, 6.

As well as how to validate file type, size before uploading to database in laravel.

Laravel 7/6 Multiple File Upload

You can easily upload multiple file with validation in laravel application using the following steps:

  1. Download Laravel Fresh New Setup
  2. Setup Database Credentials
  3. Generate Migration & Model For File
  4. Make Route For File uploading
  5. Create File Controller & Methods
  6. Create Multiple File Blade View
  7. Run Development Server

https://www.tutsmake.com/laravel-6-multiple-file-upload-with-validation-example/

#laravel multiple file upload validation #multiple file upload in laravel 7 #multiple file upload in laravel 6 #upload multiple files laravel 7 #upload multiple files in laravel 6 #upload multiple files php laravel

Christa  Stehr

Christa Stehr

1598940617

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

  1. Installing Node.js and npm
  2. Installing Angular CLI
  3. Creating workspace
  4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Angular environment setup

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

  • Node.js
  • npm Package Manager
Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

  1. npm -v

Installing Angular CLI

  • Open Terminal/Command Prompt
  • To install Angular CLI, run the below command:
  1. npm install -g @angular/cli

installing angular CLI

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

  1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

  • Using CLI
  • Using Visual Studio Code
1. Using CLI

To create a workspace:

  • Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
  • Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:
  1. Ng new YourAppName

create angular workspace

  • After running this command, it will prompt you to select from various options about the CSS and other functionalities.

angular CSS options

  • To leave everything to default, simply press the Enter or the Return key.

angular setup

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Monty  Boehm

Monty Boehm

1625127900

Angular Material 12 File Upload Example with Progress Bar

In this tutorial, I will show you way to build an Angular Material 12 File upload to Rest API example using HttpClient, FormData and Progress Bar.

More Practice:

–  Angular Material 12 Image upload with Preview example

–  Angular 12 + Spring Boot: File upload example

–  Angular 12 + Node.js: File Upload example

–  Angular 12 Login and Registration example with JWT & Web Api

–  Angular 12 CRUD Application example with Web API

–  Angular 12 Form Validation example (Reactive Forms)

– Bootstrap instead:  Angular 12 File upload example with progress bar & Bootstrap

#angular #angular #angular 12 #angular material #file

Ayyaz Zafar

1624138795

Angular Material Autocomplete - Multiple Use Cases covered

Learn How to use Angular Material Autocomplete Suggestions Search Input. I covered multiple use cases.

Please watch this video. I hope this video would be helpful for you to understand it and use it in your projects

Please subscribe: https://www.youtube.com/channel/UCL5nKCmpReJZZMe9_bYR89w

#angular #angular-material #angular-js #autocomplete #angular-material-autocomplete #angular-tutorial

How To Create Zip File Using Ziparchive in Laravel

In this tutorial i will show you how to create zip file using zipArchive in laravel. Some times client’s have requirements to have functionalities like create zip file for documentation or images and download it.

So, at that time we can find many laravel packages to perform this task. But here, i am show you to how to create zip file in laravel using zipArchive without any package. Laravel provide ZipArchive class for create zip file in laravel,So i will use ZipArchive in laravel.

In below code i have created one function in laravel controller and added ZipArchive class.

How To Create Zip File Using Ziparchive in Laravel

https://websolutionstuff.com/post/how-to-create-zip-file-using-ziparchive-in-laravel

#laravel #php #how to create zip file using ziparchive in laravel #ziparchive #zip file #create zip in laravel