Angular 14 FileSaver.js Project to Download Uploaded Files & Images From Express & Node.js Server

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

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");
})

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

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 { }

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

<button (click)="getfile()">Download</button>

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

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);
    })
  }
}

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

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'});
    }
}

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