Create An Angular App For File Upload With Progress

In this blog, you are going to learn how to create an Angular app to implement file upload functionality.

We'll be using Angular 5 and Node for creating this web app and the file upload feature. So, let's start setting up our project.

Set up Angular 5 Workspace for File Upload

Run the below commands to install or update your Angular CLI and define your Angular 5 application.

sudo npm install -g @angular/cli
ng new ang5-file-upload

Next, you need to move to the newly created appl folder and get the application started.

cd ./ang5-file-upload
ng serve

The app will run on the default port, i.e., 4200. If you like to change it to, say, 4101, then specify the port and run the command as

ng serve --port 4101

Check now whether the app is running or not. Start the browser and type the URL as "http://localhost:4200". You should see the default Angular web app screen.

Integrating Express.js to override the server

We'll be using the Express.js for this web application. It replaces the web and RESTful API server.

Express.js is a Node framework commonly used for web apps. It works as a node module for using with the applications having the server listen for any incoming connection requests.

Install Express JS

You now need to shut down the Angular web app and execute the below command for enabling the Express.js module along with its dependencies.

npm install --save express morgan connect-busboy serve-favicon

Prepare the HTTP Server for File Upload

Next, create a folder named as "bin" under the root folder and a new file as "www." You may use a different name or change the location if you like.

mkdir bin
touch bin/www

Now, copy the below code and put it in the "www" file.

#!/usr/bin/env node
/**
* Load dependencies.
*/
var app = require('../app');
var debug = require('debug')('mean-app:server');
var http = require('http');
/**
* Read port from the environment
*/
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
/**
* Launch the HTTP server.
*/
var server = http.createServer(app);
/**
* Listen on the target port, on all network interfaces.
*/
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
/**
* Normalize a port into a number, string, or false.
*/
function normalizePort(val) {
var port = parseInt(val, 10);
if (isNaN(port)) {
// named pipe
return val;
}
if (port >= 0) {
// port number
return port;
}
return false;
}
/**
* Event listener for HTTP server "error" event.
*/
function onError(error) {
if (error.syscall !== 'listen') {
throw error;
}
var bind = typeof port === 'string' ? 'Pipe ' + port : 'Port ' + port;
// Mapping errors with proper messages
switch (error.code) {
case 'EACCES':
console.error(bind + ' requires elevated privileges');
process.exit(1);
break;
case 'EADDRINUSE':
console.error(bind + ' is already in use');
process.exit(1);
break;
default:
throw error;
}
}
/**
* Add a Event listener for the HTTP server
*/
function onListening() {
var addr = server.address();
var bind = typeof addr === 'string' ? 'pipe ' + addr : 'port ' + addr.port;
debug('Listening on ' + bind);
}

One more change you need to make is to update the starting application to Express.js. So, open the "package.json" and modify the "start" value in the "script" block. See here.

"scripts": {
"ng": "ng",
"start": "ng build && node ./bin/www",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},

Enable Routing

Add a "server" folder and create a "routes" folder inside it. After that, create the "api.js".

mkdir server
mkdir server/routes
touch server/routes/api.js

Copy the following lines of code and place in the api.js file.

var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
res.send('Reply from Express JS!');
});
module.exports = router;

Start the Server

npm start

The above command starts the server on port no. 3000 as we specified in a previous step. You can check the application landing page by opening the http://localhost:3000/ URL in the browser.

The browser will request to the server, and the following response will get displayed.

Reply from Express JS!

Set up Angular Component for File Upload

Let's add the Angular 5 component to perform the file upload.

ng g component ang5-file-upload

Now, modify the "app.component.html" file with the following code.

<app-ang5-file-upload></app-ang5-file-upload>

Configure the ng2-slim-loading-bar

We will use a light-weight progress bar to indicate the progress.

npm install ng2-slim-loading-bar --save

Update App Module Config

Add the required import statements into the "app.module.ts" file.

import { HttpClientModule } from '@angular/common/http';
import { SlimLoadingBarModule } from 'ng2-slim-loading-bar';

Also, place the below code in the imports array in the @NgModule.

HttpClientModule,
SlimLoadingBarModule.forRoot()

Switch to Bootstrap

Open and modify the "src/index.html". After that, include the Bootstrap CSS and JS library.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular v5 File Upload Demo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>

Update the CSS style sheet with the following code.

app - ang5 - file - upload {
display: flex; - ms - flex - align: center;
align - items: center;
height: 100 % ;
width: 100 % ;
position: absolute;
}.card {
margin: 0 auto;
}.litebar - container {
padding: 5 px;
}

Now, change the HTML template file by editing the "src/app/ang5-file-upload/ang5-file-upload.html". PasteDemo the code from the below block.

<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Ang 5 File Upload</h5>
<input type="file" class="form-control-file" (change)="onFileSelected($event)">
<div class="litebar-container">
<ng2-slim-loading-bar></ng2-slim-loading-bar>
</div>
<div *ngIf="showMessage">
<p>{{message}}</p>
</div>
<button class="card-link" type="button" (click)="onUpload()">Upload file</button>
</div>
</div>

Another file is "src/app/ang5-file-upload/ang5-file-upload.component.ts" where you have to place the code given below.

import {
Component,
OnInit
} from '@angular/core';
import {
HttpClient,
HttpEvent,
HttpEventType
} from '@angular/common/http';
import {
SlimLoadingBarService
} from 'ng2-slim-loading-bar';
@Component({
selector: 'app-ang5-file-upload',
templateUrl: './ang5-file-upload.component.html',
styleUrls: ['./ang5-file-upload.component.css']
})
export class Ang5FileUploadComponent implements OnInit {
selectedFile: File = null;
uploadedProgress = 0;
showMessage = false;
message: String = '';
constructor(private slimLoadingBarService: SlimLoadingBarService, private http: HttpClient) {}
ngOnInit() {}
onFileSelected(event) {
this.selectedFile = < File > event.target.files[0];
}
onUpload() {
const fd = new FormData();
this.showMessage = false;
console.log(this.selectedFile.name);
fd.append('file', this.selectedFile, this.selectedFile.name);
this.http.post('/api/upload-file', fd, {
reportProgress: true,
observe: 'events'
}).subscribe((event: HttpEvent < any > ) => {
switch (event.type) {
case HttpEventType.Sent:
this.slimLoadingBarService.start();
break;
case HttpEventType.Response:
this.slimLoadingBarService.complete();
this.message = "Upload done successfully";
this.showMessage = true;
break;
case 1:
{
if (Math.round(this.uploadedPercentage) !== Math.round(event['loaded'] / event['total'] * 100)) {
this.uploadedProgress = event['loaded'] / event['total'] * 100;
this.slimLoadingBarService.progress = Math.round(this.uploadedProgress);
}
break;
}
}
}, error => {
console.log(error);
this.message = "Something went wrong";
this.showMessage = true;
this.slimLoadingBarService.reset();
});
}
}

Configure Node.js Backend

Add a public folder under the root of your app and a "data" folder inside it.

mkdir public
mkdir public/data

Next, modify the code of "server/routes/api.js" file.

var express = require('express');
var router = express.Router();
var fs = require('fs');
router.post('/upload-file', function(req, res, next) {
var fstream;
if (req.busboy) {
req.busboy.on('file', function(fieldname, file, filename, encoding, mimetype) {
fstream = fs.createWriteStream(__dirname + '/../../public/data/' + filename);
file.pipe(fstream);
fstream.on('close', function() {
console.log('file ' + filename + ' uploaded');
});
});
req.busboy.on('finish', function() {
console.log('finish, files upload done! ');
res.json({
success: true
});
});
req.pipe(req.busboy);
}
});
module.exports = router;

Finally, re-run the "npm start" command to get your Angular v5 file upload demo running.