Angular 10 upload file/image to Node.js Express server example

In this tutorial, I will show you way to build Angular 10 with Node.js Express: File/Image upload & download example.

Original Post: https://bezkoder.com/angular-10-node-js-file-upload/

Newer version with Angular 11:
https://bezkoder.com/angular-11-node-js-file-upload/

Overview

We're gonna create a full-stack Angular 10 + 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/images at once like this:

You can find the instruction here:
Angular 10 upload Multiple Images example

Technology

Server:

• express 4.17.1
• multer 1.4.2
• cors 2.8.5

Client:

• Angular 10
• 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

Angular 10 Client for file upload/download UI

This is the project structure that we're gonna build:

• We import necessary library, components in app.module.ts.
• upload-file.service provides methods to save File and get Files from Spring Boot 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.

Angular Service for File Upload
This service will use Angular HTTPClient to send HTTP requests.
There are 2 functions:

• upload(file): returns Observable<HttpEvent<any>> that we're gonna use for tracking progress
• getFiles(): returns a list of Files' information as Observable object

export class UploadFileService {

  constructor(private http: HttpClient) { }

  upload(file: File): Observable<HttpEvent<any>> {
    ...
  }

  getFiles(): Observable<any> {
    ...
  }
}

Angular Component for File Upload
File Upload Component has Progress Bar, Card, Button and Message. It injects UploadFileService to call uploadService.upload() method.

The upload 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.

upload() {
  this.progress = 0;

  this.currentFile = this.selectedFiles.item(0);
  this.uploadService.upload(this.currentFile).subscribe(
    event => {
      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 => {
      this.progress = 0;
      this.message = 'Could not upload the file!';
    });
}

For more details, implementation and Github, please visit:
https://bezkoder.com/angular-10-node-js-file-upload/

Run the App

Run Spring Boot Server with command: mvn spring-boot:run.
Refresh the project directory and you will see uploads folder inside it.

Because we configure CORS for origin: http://localhost:8081, so you need to run Angular 10 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 10 + Spring Boot example: Build a CRUD App
• Angular 10 + Spring Boot: JWT Authentication example

Fullstack CRUD App:

• Angular 10 + Spring Boot + MySQL example
• Angular 10 + Spring Boot + PostgreSQL example
• Angular 10 + Spring Boot + MongoDB example

Serverless with Firebase:
Angular 10 Firebase Storage: File Upload/Display/Delete example