Angular 8|9 Node & Express JS File Upload Tutorial
In this Angular 8|9 and Node.js blog series, we are going to look at how to upload files on the Node server. To create an Angular image upload component, I am going to use Angular 8|9 front-end framework along with ng2-file-upload NPM package; Itโs an easy to use Angular directives for uploading the files.
I am also going to take the help of Node.js to create the backend server for Image or File uploading demo. Initially, weโll 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ย is also attached with this section you can download it and use it anywhere in your projects
So lets create the local server using Node.js and multer middleware. Multer 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โll see step by step how to configure file uploading in Angular app with the help of Node js server.
Prerequisite
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 Here
After Installing Node js Now Run the following the command to install Angular CLI. It will install angular cli on your system globally
Install Angular App
Now Run the command to install the Angular project:
ng new angular-node-file-upload # ? Would you like to add Angular routing? No # ? Which stylesheet format would you like to use? CSS
cd angular-node-file-upload
Show Alert Messages When File Uploaded
We are going to install and configure ngx-toastr 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
npm install ngx-toastr --save
The ngx-toastr NPM module requires @angular/animations dependency:
npm install @angular/animations --save
Then, add the ngx-toastr CSS in angular.json file:
"styles": [
"src/styles.css",
"node_modules/ngx-toastr/toastr.css"
]Import BrowserAnimationsModule and ToastrModule in app.module.ts file:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
@NgModule({
imports: [
CommonModule,
BrowserAnimationsModule, // required animations module
ToastrModule.forRoot() // ToastrModule added
]
})
export class AppModule { }Install & Configure ng-file-upload Directive
In this step, weโll Install and configure ng-file-upload library in Angular 8|9 app. Run command to install the ng-file-upload library.
npm install ng2-file-upload
Once the ng2-file-upload directive is installed, then import the FileSelectDirective and FormsModule in app.module.ts. We need FormsModule service so that we can create the file uploading component in Angular.
import { FileSelectDirective } from 'ng2-file-upload';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
FileSelectDirective
],
imports: [
FormsModule
]
})
export class AppModule { }After that We will setting Up Node Backend for File Upload Demo
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 libraries.
Run command to create backend folder in Angular appโs root directory:
mkdir backend && cd backend
In the next step, create a specific package.json file.
npm init
Run command to install required dependencies:
npm install express cors body-parser multer dotenv --save
In order to get rid of starting the server again and again, install nodemon NPM package. Use โ-save-dev along with the npm command to register in the devDependencies array. It will make it available for development purpose only.
npm install nodemon --save-dev
Have a look at final pacakge.json file for file upload demo backend:
{
"name": "angular-node-file-upload",
"version": "1.0.0",
"description": "Angualr 8 file upload demo app",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"author": "Digamber Rawat",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"dotenv": "^8.0.0",
"express": "^4.17.1",
"multer": "^1.4.1"
},
"devDependencies": {
"nodemon": "^1.19.1"
}
}Create a file by the name of `server.js` inside `backend` folder:
Configure Server.js
To configure our backend we need to create a server.js file. In this file, weโll keep our backend serverโs settings.
touch server.js
Now, paste the following code in backend > server.js file:
const express = require('express'),
path = require('path'),
cors = require('cors'),
multer = require('multer'),
bodyParser = require('body-parser');
// File upload settings
const PATH = './uploads';
let storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, PATH);
},
filename: (req, file, cb) => {
cb(null, file.fieldname + '-' + Date.now())
}
});
let upload = multer({
storage: storage
});
// Express settings
const app = express();
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: false
}));
app.get('/api', function (req, res) {
res.end('File catcher');
});
// POST File
app.post('/api/upload', upload.single('image'), function (req, res) {
if (!req.file) {
console.log("No file is available!");
return res.send({
success: false
});
} else {
console.log('File is available!');
return res.send({
success: true
})
}
});
// Create PORT
const PORT = process.env.PORT || 8080;
const server = app.listen(PORT, () => {
console.log('Connected to port ' + PORT)
})
// Find 404 and hand over to error handler
app.use((req, res, next) => {
next(createError(404));
});
// error handler
app.use(function (err, req, res, next) {
console.error(err.message);
if (!err.statusCode) err.statusCode = 500;
res.status(err.statusCode).send(err.message);
});Now, while staying in the backend folder run the below command to start the backend server:
nodemon server.js
If everything goes fine then youโll get the following output:
[nodemon] 1.19.1 [nodemon] to restart at any time, enter `rs` [nodemon] watching: *.* [nodemon] starting `node server.js` Connected to port 8080
Create an Angular image upload component
In this last step, we are going to create a file upload component in an Angular app using Express js API.
Get into the app.component.ts file and include the following code:
import { Component, OnInit } from '@angular/core';
import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
import { ToastrService } from 'ngx-toastr';
const URL = 'http://localhost:8080/api/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!');
};
}
}Go to app.component.html file and add the given below code:
<div class="wrapper">
<h2>Angular Image Upload Demo</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>Now, Itโs time to start the Angular 8|9 app to check out the File upload demo in the browser. Run the following command:
ng serve --open
When you upload the image from front-end youโll see your image files are saving inside the backend > uploads folder.
To compare your code you can check out the below download section:
Must check out the following tutorial on how to show image preview in Angular before uploading.
Conclusion
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.
About Post Author
