Angular 10 upload file/image to Node.js Express server example
Tags: angular, node, webdev, javascript
Published: 2021-01-08 10:00:25

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/](https://bezkoder.com/angular-10-node-js-file-upload/)

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

<h2>Overview</h2>
We're gonna create a full-stack Angular 10 + Node.js: File/Image upload with Express Rest APIs, in that user can:
<ul>
	<li>see the upload process (percentage)</li>
	<li>view all uploaded files/images</li>
	<li>download by clicking on the file name</li>
</ul>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4jroudbs2l0chvpo4sp1.png)

All uploaded files will be saved in <strong>uploads</strong> folder:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fxa72hsfcsdmk0ztdypz.png)

If you want to upload multiple files/images at once like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f3qhqruxp9m19dcwepnc.png)

You can find the instruction here:
<a href="https://bezkoder.com/angular-10-upload-multiple-images/">Angular 10 upload Multiple Images example</a>

<h2>Technology</h2>
Server:
<ul>
	<li>express 4.17.1</li>
	<li>multer 1.4.2</li>
	<li>cors 2.8.5</li>
</ul>

Client:
<ul>
	<li>Angular 10</li>
	<li>RxJS 6</li>
	<li>Bootstrap 4</li>
</ul>

<h2>Node.js Express Rest APIs for File Upload & Storage</h2>
Node.js Server will provide APIs:

<div class="table-responsive">
<table class="table table-hover  table table-hover" width="100%">
<thead>
<tr>
<th>Methods</th>
<th>Urls</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>POST</td>
<td>/upload</td>
<td>upload a File</td>
</tr>
<tr>
<td>GET</td>
<td>/files</td>
<td>get List of Files (name & url)</td>
</tr>
<tr>
<td>GET</td>
<td>/files/[filename]</td>
<td>download a File</td>
</tr>
</tbody>
</table>
</div>

This is the project structure:

<img src="https://bezkoder.com/wp-content/uploads/2021/01/angular-10-node-js-file-upload-example-express-server-project-structure.png" alt="angular-10-node-js-file-upload-example-express-server-project-structure" width="280" height="360" class="alignnone size-full wp-image-6644" />

- <code>resources/static/assets/uploads</code>: folder for storing uploaded files.
- <code>middleware/upload.js</code>: initializes Multer Storage engine and defines middleware function to save uploaded files in <code>uploads</code> folder.
- <code>file.controller.js</code> exports Rest APIs: POST a file, GET all files' information, download a File with url.
- <code>routes/index.js</code>: defines routes for endpoints that is called from HTTP Client, use controller to handle requests.
- <code>server.js</code>: initializes routes, runs Express app.

You can find Step by Step to implement the Node.js Express Server (with Github) at:
<a href="https://bezkoder.com/node-js-express-file-upload/">Node.js Express File Upload Rest API example using Multer</a>

<h2>Angular 10 Client for file upload/download UI</h2>
This is the project structure that we're gonna build:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jas0zg6rts8w8zp3fhmu.png)

- We import necessary library, components in <em>app.module.ts</em>.
- <em>upload-file.service</em> provides methods to save File and get Files from Spring Boot Server.
- <em>upload-files.component</em> contains upload form, progress bar, display of list files.
- <em>app.component</em> is the container that we embed all components.
- <em>index.html</em> for importing the Bootstrap.

<strong>Angular Service for File Upload</strong>
This service will use Angular <code>HTTPClient</code> to send HTTP requests.
There are 2 functions:
<ul>
	<li><code>upload(file)</code>: returns <code>Observable&lt;HttpEvent&lt;any>></code> that we're gonna use for tracking progress</li>
	<li><code>getFiles()</code>: returns a list of Files' information as <code>Observable</code> object</li>
</ul>

```js
export class UploadFileService {

  constructor(private http: HttpClient) { }

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

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

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

The upload progress will be calculated basing on <code>event.loaded</code> and <code>event.total</code>.
If the transmission is done, the event will be a <code>HttpResponse</code> object. At this time, we call <code>uploadService.getFiles()</code> to get the files' information and assign the result to <code>fileInfos</code> variable.

```js
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/](https://bezkoder.com/angular-10-node-js-file-upload/)

<h2>Run the App</h2>
Run Spring Boot Server with command: <code>mvn spring-boot:run</code>.
Refresh the project directory and you will see <em>uploads</em> folder inside it.

Because we configure CORS for origin: <code>http://localhost:8081</code>, so you need to run Angular 10 Client with command:
<code>ng serve --port 8081</code>

Open Browser with url <code>http://localhost:8081/</code> and check the result.

<h2>Further Reading</h2>
<ul>
	<li><a href="https://angular.io/api/common/http/HttpRequest">https://angular.io/api/common/http/HttpRequest</a></li>
	<li><a href="https://bezkoder.com/angular-10-spring-boot-crud/">Angular 10 + Spring Boot example: Build a CRUD App</a></li>
	<li><a href="https://bezkoder.com/angular-10-spring-boot-jwt-auth/">Angular 10 + Spring Boot: JWT Authentication example</a></li>
</ul>

Fullstack CRUD App:
- <a href="https://bezkoder.com/angular-10-spring-boot-crud/">Angular 10 + Spring Boot + MySQL example</a>
- <a href="https://bezkoder.com/angular-10-spring-boot-postgresql/">Angular 10 + Spring Boot + PostgreSQL example</a>
- <a href="https://bezkoder.com/angular-10-spring-boot-mongodb/">Angular 10 + Spring Boot + MongoDB example</a>

Serverless with Firebase:
<a href="https://bezkoder.com/firebase-storage-angular-10-file-upload/">Angular 10 Firebase Storage: File Upload/Display/Delete example</a>