In this tutorial, I will show you way to build Angular 11 with Node.js Express: File/Image upload & download example.
Other versions:
– File Upload using Angular 8 and Node.js
– File Upload using Angular 10 and Node.js
– File Upload using Angular 12 and Node.js
– File Upload using Angular 13 and Node.js
– File Upload using Angular 14 and Node.js
– File Upload using Angular 15 and Node.js
More Practice:
– Angular + Node.js Express + MySQL example
– Angular + Node.js Express + PostgreSQL example
– Angular + Node.js Express + MongoDB example
– Angular + Node.js Express: JWT Authentication & Authorization example
– Server side Pagination with Node.js and Angular
Contents
- Overview
- Technology
- Node.js Express Rest APIs for File Upload & Storage
- Setup Angular 11 File Upload Project
- Angular 11 Project Structure
- Set up App Module
- Add Bootstrap to the project
- Create Angular Service for Upload Files
- Create Component for Upload Files
- Add Upload File Component to App Component
- Run the App
- Further Reading
- Conclusion
- Source Code
Overview
We’re gonna create a full-stack Angular 11 + Node.js: File/Image upload with Express Rest APIs, in that user can:
- see the upload process (percentage)
- view all uploaded files/images
- download by clicking on the file name
All uploaded files will be saved in uploads folder:
If you want to upload multiple files at once like this:
You can find the instruction here:
Angular 11 Multiple Files upload example with Progress Bar
With MongoDB:
Node.js Express File Upload to MongoDB example
Or working with GCS:
Node.js Express File Upload to Google Cloud Storage example
Technology
Server:
- express 4.17.1
- multer 1.4.2
- cors 2.8.5
Client:
- Angular 11
- RxJS 6
- Bootstrap 4
Node.js Express Rest APIs for File Upload & Storage
Node.js Server will provide APIs:
Methods | Urls | Actions |
---|---|---|
POST | /upload | upload a File |
GET | /files | get List of Files (name & url) |
GET | /files/[filename] | download a File |
This is the project structure:
– resources/static/assets/uploads
: folder for storing uploaded files.
– middleware/upload.js
: initializes Multer Storage engine and defines middleware function to save uploaded files in uploads
folder.
– file.controller.js
exports Rest APIs: POST a file, GET all files’ information, download a File with url.
– routes/index.js
: defines routes for endpoints that is called from HTTP Client, use controller to handle requests.
– server.js
: initializes routes, runs Express app.
You can find Step by Step to implement the Node.js Express Server (with Github) at:
Node.js Express File Upload Rest API example using Multer
With MongoDB:
Node.js Express File Upload to MongoDB example
Or working with GCS:
Node.js Express File Upload to Google Cloud Storage example
Setup Angular 11 File Upload Project
Let’s open cmd and use Angular CLI to create a new Angular 11 Project as following command:
ng new Angular11UploadFile
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
We also need to generate some Components and Services:
ng g s services/upload-files
ng g c components/upload-files
Now you can see that our project directory structure looks like this.
Angular 11 Project Structure
Let me explain it briefly.
– We import necessary library, components in app.module.ts.
– upload-file.service provides methods to save File and get Files from Node.js Server.
– upload-files.component contains upload form, progress bar, display of list files.
– app.component is the container that we embed all components.
– index.html for importing the Bootstrap.
Set up App Module
Open app.module.ts and import HttpClientModule
:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { UploadFilesComponent } from './components/upload-files/upload-files.component';
@NgModule({
declarations: [
AppComponent,
UploadFilesComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Add Bootstrap to the project
Open index.html and add following line into <head>
tag:
<!DOCTYPE html>
<html lang="en">
<head>
...
<link type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
</head>
...
</html>
Create Angular Service for Upload Files
This service will use Angular HTTPClient
to send HTTP requests.
There are 2 functions:
upload(file)
: returnsObservable<HttpEvent<any>>
that we’re gonna use for tracking progressgetFiles()
: returns a list of Files’ information asObservable
object
services/upload-file.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpRequest, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class UploadFilesService {
private baseUrl = 'http://localhost:8080';
constructor(private http: HttpClient) { }
upload(file: File): Observable<HttpEvent<any>> {
const formData: FormData = new FormData();
formData.append('file', file);
const req = new HttpRequest('POST', `${this.baseUrl}/upload`, formData, {
reportProgress: true,
responseType: 'json'
});
return this.http.request(req);
}
getFiles(): Observable<any> {
return this.http.get(`${this.baseUrl}/files`);
}
}
– FormData
is a data structure that can be used to store key-value pairs. We use it to build an object which corresponds to an HTML form with append()
method.
– We set reportProgress: true
to exposes progress events. Notice that this progress event are expensive (change detection for each event), so you should only use when you want to monitor it.
– We call the request(PostRequest)
& get()
method of HttpClient
to send an HTTP POST & Get request to the Node.js File Upload server.
Create Component for Upload Files
Let’s create a File Upload UI with Progress Bar, Card, Button and Message.
First we need to use the following imports:
upload-files.component.ts
import { Component, OnInit } from '@angular/core';
import { UploadFileService } from 'src/app/services/upload-file.service';
import { HttpEventType, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
Then we define the some variables and inject UploadFileService
as follows:
export class UploadFilesComponent implements OnInit {
selectedFiles?: FileList;
currentFile?: File;
progress = 0;
message = '';
fileInfos?: Observable<any>;
constructor(private uploadService: UploadFileService) { }
}
Next we define selectFile()
method. It helps us to get the selected Files.
selectFile(event: any): void {
this.selectedFiles = event.target.files;
}
Next we write upload()
method for upload file:
upload(): void {
this.progress = 0;
if (this.selectedFiles) {
const file: File | null = this.selectedFiles.item(0);
if (file) {
this.currentFile = file;
this.uploadService.upload(this.currentFile).subscribe(
(event: any) => {
if (event.type === HttpEventType.UploadProgress) {
this.progress = Math.round(100 * event.loaded / event.total);
} else if (event instanceof HttpResponse) {
this.message = event.body.message;
this.fileInfos = this.uploadService.getFiles();
}
},
(err: any) => {
console.log(err);
this.progress = 0;
if (err.error && err.error.message) {
this.message = err.error.message;
} else {
this.message = 'Could not upload the file!';
}
this.currentFile = undefined;
});
}
this.selectedFiles = undefined;
}
}
We use selectedFiles
for accessing current File as the first Item. Then we call uploadService.upload()
method on the currentFile
.
The progress will be calculated basing on event.loaded
and event.total
.
If the transmission is done, the event will be a HttpResponse
object. At this time, we call uploadService.getFiles()
to get the files’ information and assign the result to fileInfos
variable.
We also need to do this work in ngOnInit()
method:
ngOnInit(): void {
this.fileInfos = this.uploadService.getFiles();
}
Now we create the HTML template of the Upload File UI. Add the following content to upload-files.component.html file:
<div class="row">
<div class="col-8">
<label class="btn btn-default p-0">
<input type="file" (change)="selectFile($event)" />
</label>
</div>
<div class="col-4">
<button class="btn btn-success btn-sm" [disabled]="!selectedFiles" (click)="upload()">
Upload
</button>
</div>
</div>
<div *ngIf="currentFile" class="progress my-3">
<div
class="progress-bar progress-bar-info progress-bar-striped"
role="progressbar"
attr.aria-valuenow="{{ progress }}"
aria-valuemin="0"
aria-valuemax="100"
[ngStyle]="{ width: progress + '%' }"
>
{{ progress }}%
</div>
</div>
<div *ngIf="message" class="alert alert-secondary" role="alert">{{ message }}</div>
<div class="card mt-3">
<div class="card-header">List of Files</div>
<ul
class="list-group list-group-flush"
*ngFor="let file of fileInfos | async"
>
<li class="list-group-item">
<a href="{{ file.url }}">{{ file.name }}</a>
</li>
</ul>
</div>
Add Upload File Component to App Component
Open app.component.html and embed the UploadFile Component with <app-upload-files>
tag.
<div class="container" style="width:600px">
<div class="my-3">
<h3>bezkoder.com</h3>
<h4>{{ title }}</h4>
</div>
<app-upload-files></app-upload-files>
</div>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 11 File Upload';
}
Run the App
First we need to create uploads folder with the path resources/static/assets
(on server side). Run Node.js Server with command: node server.js
.
Because we configure CORS for origin: http://localhost:8081
, so you need to run Angular 11 Client with command:
ng serve --port 8081
Open Browser with url http://localhost:8081/
and check the result.
Further Reading
- https://angular.io/api/common/http/HttpRequest
- Angular 11 JWT Authentication example with Web Api
- Angular 11 CRUD Application example with Web API
Fullstack:
– Angular + Node.js Express + MySQL example
– Angular + Node.js Express + PostgreSQL example
– Angular + Node.js Express + MongoDB example
– Angular + Node.js Express: JWT Authentication & Authorization example
– Server side Pagination with Node.js and Angular
Conclusion
Today we’re learned how to build File Upload and Download example using Angular 11 and Node.js Express. We also provide the ability to show list of files, upload progress using Bootstrap, and to download file from the server.
You can find Step by Step to implement the Node.js Server at:
Node.js Express File Upload Rest API example using Multer
If you want to upload multiple files at once like this:
You can find the instruction here:
Angular 11 Multiple Files upload example with Progress Bar
With MongoDB:
Node.js Express File Upload to MongoDB example
Or upload file to GCS:
Node.js Express File Upload to Google Cloud Storage example
You will want to know how to run both projects in one place:
How to Integrate Angular with Node.js Restful Services
Source Code
The source code for the Angular 11 Client is uploaded to Github.
how do i view images instead of filename
Hi, you can read following tutorial:
Angular 11 Multiple Images Upload with Preview example
How can I preview the selected images ?
Hi, I will write the tutorial when having time 🙂
When clicking on a file to download it from the file list, I get sent to Localhost:8080FILENAME instead of Localhost:8080/files/FILENAME.
How do I make sure that clicking on a file name, takes you to the right url? In what .js file should this be adjusted or where can I find this mistake?
Thanks!
Hi, the file url is sent from server, so you need to read articles I mentioned in this tutorial for server code 🙂