{"id":946,"date":"2024-04-14T14:16:10","date_gmt":"2024-04-14T14:16:10","guid":{"rendered":"https:\/\/www.appfinz.com\/blogs\/?p=946"},"modified":"2025-05-15T04:48:57","modified_gmt":"2025-05-15T04:48:57","slug":"angular-89-node-express-js-file-upload-tutorial","status":"publish","type":"post","link":"https:\/\/www.appfinz.com\/blogs\/angular-89-node-express-js-file-upload-tutorial\/","title":{"rendered":"Angular 8|9 Node & Express JS File Upload Tutorial"},"content":{"rendered":"\n

In this Angular 8|9 and Node.js blog series, we are going to look at how to upload files on the Node server<\/strong>. To create an Angular image upload component<\/strong>, I am going to use Angular 8|9 front-end framework along with ng2-file-upload NPM package; It\u2019s an easy to use Angular directives for uploading the files.<\/p>\n\n\n\n

I am also going to take the help of Node.js to create the backend server for Image or File uploading demo. Initially, we\u2019ll set up an Angular 8|9 web app from scratch using Angular CLI. You must have Node.js and Angular CLI installed in your system. Source Code<\/a> is also attached with this section you can download it and use it anywhere in your projects<\/p>\n\n\n\n

So lets create the local server using Node.js and multer middleware. Multer<\/a> is a node.js middleware for handling multipart\/form-data, which is primarily used for uploading files. Once we are done setting up front-end and backend for our File uploading demo then, we\u2019ll see step by step how to configure file uploading in Angular app with the help of Node js server.<\/p>\n\n\n\n

Prerequisite<\/h3>\n\n\n\n

In order to show you Angular 8|9 File upload demo,I am assuming that you should have Node.js and Angular CLI installed in your system. If not then download Node js<\/a> Here<\/p>\n\n\n\n

After Installing Node js Now Run the following the command to install Angular CLI. It will install angular cli on your system globally<\/p>\n\n\n\n

<\/pre><\/div>\n\n\n\n
Install Angular App<\/h3>\n\n\n\n
Now Run the command to install the Angular project:<\/p>\n\n\n\n
ng new angular-node-file-upload\n\n# ? Would you like to add Angular routing? No\n# ? Which stylesheet format would you like to use? CSS<\/pre><\/div>\n\n\n\n
cd angular-node-file-upload<\/pre><\/div>\n\n\n\n
Show Alert Messages When File Uploaded<\/h3>\n\n\n\n
We are going to install and configure ngx-toastr<\/a> an NPM package which helps in showing the alert message when the file is uploaded on the node server.so you can also follow the same procedure<\/p>\n\n\n\n
npm install ngx-toastr --save<\/pre><\/div>\n\n\n\n
The ngx-toastr<\/strong> NPM module requires @angular\/animations<\/strong> dependency:<\/p>\n\n\n\n
npm install @angular\/animations --save<\/pre><\/div>\n\n\n\n
Then, add the ngx-toastr<\/strong> CSS in angular.json<\/code> file:<\/p>\n\n\n\n
"styles": [\n    "src\/styles.css",\n    "node_modules\/ngx-toastr\/toastr.css"\n]<\/pre><\/div>\n\n\n\n
Import BrowserAnimationsModule<\/strong> and ToastrModule<\/strong> in app.module.ts<\/code> file:<\/p>\n\n\n\n
import { BrowserAnimationsModule } from '@angular\/platform-browser\/animations';\nimport { ToastrModule } from 'ngx-toastr';\n \n@NgModule({\n  imports: [\n    CommonModule,\n    BrowserAnimationsModule, \/\/ required animations module\n    ToastrModule.forRoot() \/\/ ToastrModule added\n  ]\n})\n\nexport class AppModule { }<\/pre><\/div>\n\n\n\n
Install & Configure ng-file-upload Directive<\/h3>\n\n\n\n
In this step, we\u2019ll Install and configure ng-file-upload library in Angular 8|9 app. Run command to install the ng-file-upload<\/strong> library.<\/p>\n\n\n\n
npm install ng2-file-upload<\/pre><\/div>\n\n\n\n
Once the ng2-file-upload<\/strong> directive is installed, then import the FileSelectDirective<\/strong> and FormsModule<\/strong> in app.module.ts<\/code>. We need FormsModule<\/strong> service so that we can create the file uploading component in Angular.<\/p>\n\n\n\n
import { FileSelectDirective } from 'ng2-file-upload';\nimport { FormsModule } from '@angular\/forms';\n\n@NgModule({\n  declarations: [\n    FileSelectDirective\n  ],\n  imports: [\n    FormsModule\n  ]\n})\n\nexport class AppModule { }<\/pre><\/div>\n\n\n\n
After that We will setting Up Node Backend for File Upload Demo<\/h3>\n\n\n\n
To upload the file on the server, we need to set up a separate backend. In this blog series, we will be using Node & Express js to create server locally along with multer, express js, body-parser, and dotenv<\/strong> libraries.<\/p>\n\n\n\n
Run command to create backend folder in Angular app\u2019s root directory:<\/p>\n\n\n\n
mkdir backend && cd backend<\/pre><\/div>\n\n\n\n
In the next step, create a specific package.json<\/code> file.<\/p>\n\n\n\n
npm init<\/pre><\/div>\n\n\n\n
Run command to install required dependencies:<\/p>\n\n\n\n
npm install express cors body-parser multer dotenv --save<\/pre><\/div>\n\n\n\n
In order to get rid of starting the server again and again, install nodemon NPM package. Use \u2013-save-dev<\/code> along with the npm command to register in the devDependencies<\/strong> array. It will make it available for development purpose only.<\/p>\n\n\n\n
npm install nodemon --save-dev<\/pre><\/div>\n\n\n\n
Have a look at final pacakge.json<\/strong> file for file upload demo backend:<\/p>\n\n\n\n
{\n  "name": "angular-node-file-upload",\n  "version": "1.0.0",\n  "description": "Angualr 8 file upload demo app",\n  "main": "server.js",\n  "scripts": {\n    "test": "echo \\"Error: no test specified\\" && exit 1",\n    "start": "node server.js"\n  },\n  "author": "Digamber Rawat",\n  "license": "ISC",\n  "dependencies": {\n    "body-parser": "^1.19.0",\n    "cors": "^2.8.5",\n    "dotenv": "^8.0.0",\n    "express": "^4.17.1",\n    "multer": "^1.4.1"\n  },\n  "devDependencies": {\n    "nodemon": "^1.19.1"\n  }\n}<\/pre><\/div>\n\n\n\n
Create a file by the name of `server.js`<\/code> inside `backend`<\/code> folder:<\/p>\n\n\n\n
Configure Server.js<\/h3>\n\n\n\n
To configure our backend we need to create a server.js<\/code> file. In this file, we\u2019ll keep our backend server\u2019s settings.<\/p>\n\n\n\n
touch server.js<\/pre><\/div>\n\n\n\n
Now, paste the following code in backend > server.js<\/code> file:<\/p>\n\n\n\n
const express = require('express'),\n  path = require('path'),\n  cors = require('cors'),\n  multer = require('multer'),\n  bodyParser = require('body-parser');\n\n\/\/ File upload settings  \nconst PATH = '.\/uploads';\n\nlet storage = multer.diskStorage({\n  destination: (req, file, cb) => {\n    cb(null, PATH);\n  },\n  filename: (req, file, cb) => {\n    cb(null, file.fieldname + '-' + Date.now())\n  }\n});\n\nlet upload = multer({\n  storage: storage\n});\n\n\/\/ Express settings\nconst app = express();\napp.use(cors());\napp.use(bodyParser.json());\napp.use(bodyParser.urlencoded({\n  extended: false\n}));\n\napp.get('\/api', function (req, res) {\n  res.end('File catcher');\n});\n\n\/\/ POST File\napp.post('\/api\/upload', upload.single('image'), function (req, res) {\n  if (!req.file) {\n    console.log("No file is available!");\n    return res.send({\n      success: false\n    });\n\n  } else {\n    console.log('File is available!');\n    return res.send({\n      success: true\n    })\n  }\n});\n\n\/\/ Create PORT\nconst PORT = process.env.PORT || 8080;\nconst server = app.listen(PORT, () => {\n  console.log('Connected to port ' + PORT)\n})\n\n\/\/ Find 404 and hand over to error handler\napp.use((req, res, next) => {\n  next(createError(404));\n});\n\n\/\/ error handler\napp.use(function (err, req, res, next) {\n  console.error(err.message);\n  if (!err.statusCode) err.statusCode = 500;\n  res.status(err.statusCode).send(err.message);\n});<\/pre><\/div>\n\n\n\n
Now, while staying in the backend folder run the below command to start the backend server:<\/p>\n\n\n\n
nodemon server.js<\/pre><\/div>\n\n\n\n
If everything goes fine then you\u2019ll get the following output:<\/p>\n\n\n\n
[nodemon] 1.19.1\n[nodemon] to restart at any time, enter `rs`\n[nodemon] watching: *.*\n[nodemon] starting `node server.js`\nConnected to port 8080<\/pre><\/div>\n\n\n\n
Create an Angular image upload component<\/strong><\/h2>\n\n\n\n
In this last step, we are going to create a file upload component in an Angular app using Express js API.<\/p>\n\n\n\n
Get into the app.component.ts<\/code> file and include the following code:<\/p>\n\n\n\n
import { Component, OnInit } from '@angular\/core';\nimport { FileUploader } from 'ng2-file-upload\/ng2-file-upload';\nimport { ToastrService } from 'ngx-toastr';\n\nconst URL = 'http:\/\/localhost:8080\/api\/upload';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: ['.\/app.component.css']\n})\n\nexport class AppComponent implements OnInit {\n  public uploader: FileUploader = new FileUploader({\n    url: URL,\n    itemAlias: 'image'\n  });\n\n  constructor(private toastr: ToastrService) { }\n\n  ngOnInit() {\n    this.uploader.onAfterAddingFile = (file) => {\n      file.withCredentials = false;\n    };\n    this.uploader.onCompleteItem = (item: any, status: any) => {\n      console.log('Uploaded File Details:', item);\n      this.toastr.success('File successfully uploaded!');\n    };\n  }\n\n}<\/pre><\/div>\n\n\n\n
Go to app.component.html<\/code> file and add the given below code:<\/p>\n\n\n\n
<div class="wrapper">\n  <h2>Angular Image Upload Demo<\/h2>\n\n  <div class="file-upload">\n    <input type="file" name="image" ng2FileSelect [uploader]="uploader" accept="image\/x-png,image\/gif,image\/jpeg" \/>\n    <button type="button" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">\n      Upload\n    <\/button>\n  <\/div>\n\n<\/div><\/pre><\/div>\n\n\n\n
Now, It\u2019s time to start the Angular 8|9 app to check out the File upload demo<\/strong> in the browser. Run the following command:<\/p>\n\n\n\n
ng serve --open<\/pre><\/div>\n\n\n\n
When you upload the image from front-end you\u2019ll see your image files are saving inside the backend > uploads<\/code> folder.<\/p>\n\n\n\n
To compare your code you can check out the below download section:<\/p>\n\n\n\n
Must check out the following tutorial on how to show image preview in Angular before uploading.<\/p>\n\n\n\n
Conclusion<\/h3>\n\n\n\n
In this Angular 8|9 Blog Series, we barely scratched the surface related to file uploading in a Node application. There are various other methods available on the internet through which you can achieve file uploading task quickly. However, this Blog is suitable for beginners developers. I hope this blog will surely help and you if you liked this tutorial, please consider sharing it with others.<\/p>\n\n\n\n
If you\u2019re planning to revamp your online presence, don\u2019t miss exploring our website designing services<\/a> and custom website development solutions<\/a> tailored to your business needs.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this Angular 8|9 and Node.js blog series, we are going to look at how to<\/p>\n","protected":false},"author":1,"featured_media":1280,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[121],"tags":[],"class_list":["post-946","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs"],"_links":{"self":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/946","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/comments?post=946"}],"version-history":[{"count":3,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/946\/revisions"}],"predecessor-version":[{"id":1343,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/946\/revisions\/1343"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/media\/1280"}],"wp:attachment":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/media?parent=946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/categories?post=946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/tags?post=946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}