The comprehensive step by step MEAN (MongoDB, Express.js, Angular 10, Node.js) Stack tutorial on upload image file using Multer

In this tutorial, we will show you how to upload an image file in MEAN (MongoDB, Express.js, Angular 10, Node.js) stack app using Multer. We will use the previous tutorial on the REST API image upload with the latest version and dependencies for this tutorial.

This tutorial divided into several steps:

• Step #1: Create a New Node Express.js App
• Step #2: Install the required modules and dependencies
• Step #3: Add Mongoose Models or Schemas
• Step #4: Add Express.js REST API Route for Image Upload
• Step #5: Create a New Angular 10 App
• Step #6: Add Angular 10 Routing and Navigation
• Step #7: Add Angular 10 Service
• Step #8: Create Angular Material Upload Image Form
• Step #9: Run and Test a Complete MEAN Stack (Angular 10) App

The following tools, frameworks, modules, and libraries are required for this tutorial:

1. Node.js
2. MongoDB
3. Angular 10
4. Angular CLI
5. Express.js
6. Mongoose.js
7. Multer.js
8. Angular Material Input File
9. Terminal or Command Line
10. IDE or Text Editor (we are using VSCode)

Before the move to the main steps of this tutorial, make sure that you have installed Node.js and MongoDB on your machine. You can check the Node.js version after installing it from the terminal or Node.js command line.

node -v
v12.18.0
npm -v
6.14.5

Let’s get started with the main steps!

Step #1: Create a New Node Express.js App

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. To create the Express.js app, we will be using the Express generator. Type this command to install it.

sudo npm install -g express-generator

Next, create an Express.js app by typing this command.

express mean-uploader --no-view

Go to the newly created sales-report folder then install all NPM modules.

cd ./mean-uploader
npm install

Open this Express.js project with your IDE or Text Editor. To use Visual Studio Code, type this command.

code .

Now, we have this Express.js app structure for the mean-uploader app.

.
|-- app.js
|-- bin
|   `-- www
|-- node_modules
|-- package-lock.json
|-- package.json
|-- public
|   |-- images
|   |-- index.html
|   |-- javascripts
|   `-- stylesheets
|       `-- style.css
`-- routes
    |-- index.js
    `-- users.js

To check and sanitize the Express.js app, run this app for the first time.

nodemon

or

npm start

Then you will see this page when open the browser and go to localhost:3000.

To make this Express.js server accessible from the different port or domain. Enable the CORS by adding this module.

npm i --save cors

Next, add this import to app.js after other require.

var cors = require('cors');

Then add this line to app.js before other app.use.

app.use(cors());

Step #2: Install the required modules and dependencies

We will use Mongoose as the ODM for MongoDB. For the upload file to the Node server, we will use Multer.js. To install those required modules, type this command.

npm install --save mongoose multer

Back to app.js then call the Mongoose module.

var mongoose = require('mongoose');

Create a connection to the MongoDB server using these lines of codes.

mongoose.connect('mongodb://localhost/blog-cms', {
    promiseLibrary: require('bluebird'),
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useCreateIndex: true
}).then(() =>  console.log('connection successful'))
  .catch((err) => console.error(err));

Now, if you re-run again Express.js server after running MongoDB server or daemon, you will see this information in the console.

[nodemon] 2.0.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node ./bin/www`
connection successful

That’s mean, the connection to the MongoDB is successful. There’s no additional configuration for Multer.js for this tutorial.

Step #3: Add Mongoose Models or Schemas

The uploaded image will not save to the MongoDB collection, but it will save to the server directory that accessible from the Angular 10 client. So, there’s only an image URL that will be saved in the MongoDB collection as a string field. We need to create new Mongoose models or schemas for it. First, create a new folder in the root of the project folder that holds the Mongoose models or schemas files then add this model file.

mkdir models
touch models/Gallery.js

Open and edit models/Gallery.js then add these lines of Mongoose schema.

var mongoose = require('mongoose');

var GallerySchema = new mongoose.Schema({
  id: String,
  imageUrl: String,
  imageTitle: String,
  imageDesc: String,
  uploaded: { type: Date, default: Date.now },
});

#mongodb #express #angular #node #image