Angular 20 MEAN Stack CRUD with Image Upload using Node.js, Express & MongoDB

The MEAN stack (MongoDB, Express.js, Angular, Node.js) is one of the most popular full-stack JavaScript frameworks for developing modern web applications. In this tutorial article, we’ll outline how to build a complete MEAN stack application using Angular 20 for the frontend and Node.js + Express + MongoDB for the backend.

This guide will walk you through CRUD operations—Create, Read, Update, Delete—with the addition of image upload functionality, making it suitable for real-world use cases like user profiles, product listings, or blog posts.

🔧 Backend (Node.js, Express, MongoDB) – Overview

To support Angular 20 on the frontend, we’ll develop a RESTful API using Node.js and Express.js.

📁 Project Structure

E:.
│   .env
│   app.js
│   package-lock.json
│   package.json
│
├───models
│       User.js
│
├───routes
│       userRoutes.js
│
└───uploads
        1750152136740-mobile.png

• models/ → Contains Mongoose schemas (e.g., User.js).
• routes/ → Houses Express route files (e.g., userRoutes.js).
• uploads/ → Stores images uploaded by users.
• app.js → Main server entry file for Express and routing.
• .env → Stores sensitive environment variables (like DB URI).

1. Project Setup

• Initialize a Node.js project using npm init.
• Install required dependencies: express, mongoose, cors, multer, body-parser.

2. MongoDB Integration

• Use Mongoose to connect with MongoDB.
• Define a schema for the data, such as name, description, and image path.

3. API Endpoints

• POST /api/items – Create a new item with an image.
• GET /api/items – Fetch all items.
• GET /api/items/:id – Get a specific item by ID.
• PUT /api/items/:id – Update an existing item (with optional image replacement).
• DELETE /api/items/:id – Delete an item and its image file.

4. Image Upload Handling

• Use the Multer middleware for handling multipart/form-data.
• Store images in a dedicated /uploads folder and save the file path in MongoDB.

5. CORS & JSON Middleware

• Enable CORS for Angular to communicate with the backend.
• Use middleware to parse JSON and form data.

💡 Backend Sample Files

• • app.js

app.js code here...

• • models/User.js

User.js code here...

• • routes/userRoutes.js

userRoutes.js code here...

🌐 Frontend (Angular 20) – Overview

The frontend will be built with Angular 20, focusing on a user-friendly UI and responsive behavior. It will consume the REST API and allow full CRUD operations along with image uploads.

📁 Angular Project Structure

E:.
│   index.html
│   main.ts
│   styles.css
│
└───app
    │   app.config.ts
    │   app.css
    │   app.html
    │   app.routes.ts
    │   app.spec.ts
    │   app.ts
    │
    ├───models
    │       user.model.ts
    │
    ├───services
    │       user.service.ts
    │       user.service - Copy.ts
    │
    ├───user-create
    │       user-create.css
    │       user-create.html
    │       user-create.spec.ts
    │       user-create.ts
    │
    ├───user-list
    │       user-list.css
    │       user-list.html
    │       user-list.spec.ts
    │       user-list.ts
    │
    └───user-update
            user-update.css
            user-update.html
            user-update.spec.ts
            user-update.ts

• index.html, main.ts, styles.css – Bootstrap the app and define global styles.
• app/ – Core application module and config files.
• models/ – Interfaces or classes (e.g., user.model.ts).
• services/ – Logic for API interaction (e.g., user.service.ts).
• user-create/ – Component for creating users.
• user-list/ – Component to list users.
• user-update/ – Component for updating users.

1. Project Initialization

• Create a new Angular 20 project using Angular CLI.
• Install HttpClientModule and FormsModule.

2. Components Structure

• ItemListComponent – Lists all items.
• ItemFormComponent – Form for add/edit items.
• ImagePreviewComponent – Preview image before upload.

3. Services

• ItemService to interact with backend.
• Include methods: getItems(), addItem(), updateItem(), deleteItem().

4. Forms and Validation

• Use reactive/template-driven forms.
• Validate fields and file types.

5. Image Preview & Upload

• Use file input for selection.
• Use FileReader to preview image.
• Send form as FormData to backend.

6. UI & UX Enhancements

• Use Angular animations and styling.
• Show feedback messages.
• Optionally use Angular Material.

💡 Frontend Sample Files

• • app.ts

app.ts code here...

• • user.service.ts

user.service.ts code here...

• • user-create.ts

user-create.ts code here...

• • user-list.ts

user-list.ts code here...

• • user-update.ts

user-update.ts code here...

✅ Final Thoughts

Building a MEAN stack CRUD app with image upload is an excellent way to understand full-stack development. It covers:

• Backend API architecture
• MongoDB schema design
• Middleware integration
• Angular 20 component and service communication
• File handling and UI feedback

With these fundamentals, you’ll be well-equipped to scale this into a full project like a blog CMS, eCommerce admin panel, or content upload dashboard.