Welcome folks today in this blog post we will be using the filesaver.js
library in angular to download the uploaded
files in node.js and express backend app in browser. All the full source code of the application is shown below.
Get Started
In order to get started you need to make the fullstack
folder and inside it we need to make two folders for the frontend
and the backend
as shown below
mkdir fullstack
cd fullstack
Making the Express.js Backend
First of all we will be building the backend
of the app as shown below
mkdir backend
cd backend
And inside it you need to make a new node.js
app as shown below
npm init -y
npm i express
npm i cors
And now you will see the below directory
structure of the app as shown below
Now you need to create a public
folder in which you need to store the profile.jpg
image file that we will be downloading it inside the angular
frontend using the filesaver.js library.
And after that you need to create the index.js
file and copy paste the following code
index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
const express = require('express'); const bodyParser = require('body-parser'); const cors = require('cors') const app = express(); app.use(cors()) app.use(bodyParser.json({ type: "application/json" })); app.use(bodyParser.urlencoded({ extended: false })); app.use(express.static('public')); app.get('/getFile', function (req, res, next) { res.download('./public/profile.jpg', function (err) { if (err) { next(err); } }) }) app.use(function (err, req, res, next) { res.status(err.status).send(err); }) app.listen(8081, function () { console.log("Server listening on port 8081"); }) |
As you can see we are importing the express
library and then we are applying the cors
middleware to allow the angular
app to make requests to this backend and then we are applying the bodyparser middleware as well. And then we have the simple get
request to the /getFile
route in which we are using the download()
method to download the profile.jpg
as an attachment inside the browser when the angular app makes a request to it.
Now start the backend express server by executing the below command as shown below
node index.js
Making the Angular FrontEnd
Now guys we need to make a new directory called frontend
and inside it make a new angular
app as shown below
mkdir frontend
cd frontend
ng new sampleapp
cd sampleapp
And after that you need to install the below libraries using the npm
command as shown below
npm i file-saver
After that you will see the below directory
structure of the angular app as shown below
After that you need to go to app.module.ts
file and copy paste the following code
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
As you can see we are importing the HttpClientModule
to make http requests in the angular app which is required for this frontend.
Now we need to go to app.component.html
file and copy paste the below html
code
app.component.html
1 |
<button (click)="getfile()">Download</button> |
As you can see there is a simple download
button where we allow the user to download the image
file from the backend if they press the button then the getFile()
method will execute. Now we need to define this method inside the app.component.ts
file as shown below
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import { Component, OnInit } from '@angular/core'; import { saveAs } from 'file-saver'; import { DownloadfileService } from './downloadfile.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title="download file" constructor(private serv: DownloadfileService) { } ngOnInit(): void { } getfile() { this.serv.getFile().subscribe((data: Blob | MediaSource) => { let downloadURL = window.URL.createObjectURL(data); saveAs(downloadURL); }) } } |
As you can see we are importing the file-saver
library at the top and inside the ngOnInit()
we are using the downloadfile
service that we are importing at the top and using the method we are converting the file
fetched to blob object and download it as an attachment using the saveAs()
method. Now we need to create this service file by executing the below command as shown below
ng g service downloadfile
This will create two files as shown below
Now copy paste the below code inside the downloadfile.service.ts
file as shown below
downloadfile.service.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class DownloadfileService { constructor(private http:HttpClient) { } getFile(){ return this.http.get('http://localhost:8081/getfile',{responseType:'blob'}); } } |
As you can see inside this service
we are importing the httpclient
library at the top and then we are making a simple get
request to the backend to get the file as a blob
object.
Now start the angular app as shown below
ng serve