Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Sitemap
Menu

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

Posted on January 25, 2023

 

 

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

 

 

JavaScript
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

 

 

TypeScript
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

 

 

TypeScript
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

 

 

TypeScript
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

 

 

 

 

Recent Posts

  • Build a Fixed Deposit Interest Calculator Using Amount and Time in Browser Using HTML5 & Javascript
  • How to Download Files From URL in Node.js Using Node-Downloader-Helper Library
  • Angular 10 Image Carousel and Video Gallery Lightbox Modal Slider Using ng-image-slider Library
  • React Unsplash Api Photo Search App
  • React Form Validation Using Formik and Yup
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • javascript
  • Koajs
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme