Angular 15/14 Node JS File Upload Example

Angular 15/14 + Node Express file/image upload with form data example; Through this tutorial, i am going to show you how to upload file/image in Angular 15/14 app with node express js as backend.

Angular 15/14 Node JS File Upload Example

Follow the below given steps to upload files using node js (as backend) + Angular 15/14 (as frontend) apps; as follows:

Create Angular Frontend App
- Step 1 – Create New Angular App
- Step 2 – Install ng-file-upload Directive & toastr Notification
- Step 3 – Import Installed Modules on app.module.ts
- Step 4 – Create File Upload Form
- Step 5 – Import Components app.component.ts
Create Node Express JS Backend
- Step 1 – Create Node JS App
- Step 2 – Install Express body parser and cors Dependencies
- Step 3 – Create Server.js
- Step 4 – Start Node JS App

Create Angular Frontend App

Follow the below given steps to create angular app for file uploads, as frontend;

Step 1 – Create New Angular App

Run the following command on command prompt to install angular app:

ng new my-new-app

Step 2 – Install ng-file-upload Directive & toastr Notification

Run the following command on command prompt to install ng-file-upload Directive & toastr Notification in angular 12 app:

npm install @angular/animations --save

npm install ng2-file-upload

Then, add the ngx-toastr CSS in angular.json file:

"styles": [
    "src/styles.css",
    "node_modules/ngx-toastr/toastr.css"
]

"styles": [
    "src/styles.css",
    "node_modules/ngx-toastr/toastr.css"
]

Step 3 – Import Installed Modules on app.module.ts

Import HttpClientModule, FormsModule, FileSelectDirective and ToastrModule in app.module.ts file like following:

import { FileSelectDirective } from 'ng2-file-upload';
import { FormsModule } from '@angular/forms';
import { ToastrModule } from 'ngx-toastr';
@NgModule({
  declarations: [
    FileSelectDirective
  ],
  imports: [
    FormsModule
    BrowserModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot()
  ]
})
export class AppModule { }

Step 4 – Create File Upload Form

Create html markup for file upload form with input file element and image tag. So, visit src/app/app.component.html and update the following code into it:

<div class="wrapper">
  <h2>Angular Image Upload</h2>
  <div class="file-upload">
    <input type="file" name="image" ng2FileSelect [uploader]="uploader" accept="image/x-png,image/gif,image/jpeg" />
    <button type="button" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
      Upload
    </button>
  </div>
</div>

Step 5 – Import Components app.component.ts

Go to the src/app directory and open app.component.ts. Then add the following code into it:

import { Component, OnInit } from '@angular/core';
import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
import { ToastrService } from 'ngx-toastr';
const URL = 'http://localhost:3000/upload';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  public uploader: FileUploader = new FileUploader({
    url: URL,
    itemAlias: 'image'
  });
  constructor(private toastr: ToastrService) { }
  ngOnInit() {
    this.uploader.onAfterAddingFile = (file) => {
      file.withCredentials = false;
    };
    this.uploader.onCompleteItem = (item: any, status: any) => {
      console.log('Uploaded File Details:', item);
      this.toastr.success('File successfully uploaded!');
    };
  }
}

Then execute the following command on terminal to start the app to check out the File upload in the browser:

ng serve --open

Create Node Express JS Backend

Use the below given steps to create node js express app for file upload to storage and db; as follows:

Step 1 – Create Node JS App

Run the following command on command prompt to create node js app:

mkdir my-app
cd my-app
npm init -y

Step 2 – Install Express body parser and cors Dependencies

Run the following commands to install imperative npm packages which will help us to create REST APIs for your angular file upload app:

npm install express express-fileupload body-parser cors
npm install nodemon --save-dev

Step 3 – Create Server.js File

In this step, add the following code into it:

const express = require("express");
const fileupload = require("express-fileupload");
const cors = require("cors");
const bodyParser = require('body-parser');
const app = express();
app.use(cors());
app.use(fileupload());
app.use(express.static("files"));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.post("/upload", (req, res) => {
  const newpath = __dirname + "/files/";
  const file = req.files.file;
  const filename = file.name;
  file.mv(`${newpath}${filename}`, (err) => {
    if (err) {
      res.status(500).send({ message: "File upload failed", code: 200 });
    }
    res.status(200).send({ message: "File Uploaded", code: 200 });
  });
});
app.listen(3000, () => {
  console.log("Server running successfully on 3000");
});