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

You can watch the video tutorial from our YouTube channel here. If you like it, please share, comment, and subscribe to this channel.

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 mean-uploader 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.

MEAN Stack (Angular 10) Tutorial: Upload Image File - express welcome

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());

#node.js #angular 10 #mean stack #mongodb #mongodb #multer

MEAN Stack (Angular 10) Tutorial: Upload Image File
2.90 GEEK