Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
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

  • Android Java Project to Store,Read & Delete Data Using SharedPreferences Example
  • Android Java Project to Download Multiple Images From URL With Progressbar & Save it inside Gallery
  • Android Java Project to Capture Image From Camera & Save it inside Gallery
  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme