DEV Community: mass status

# ASP.NET Core Web API — Full CRUD + Image Upload + Swagger (Full-Stack Backend Guide)

mass status — Thu, 23 Jul 2026 18:09:05 +0000

Intha guide-la Swashbuckle (Swagger), Image Upload, mariyum Full CRUD (Create, Read, Update, Delete) ellam step-by-step cover pannirukom. Update/Delete panrapo pazhaya image-a server-la irundhu automatic-a delete panra logic-um irukku — real-time projects-ku romba mukkiyam.

📁 Final Project Folder Structure

MyCrudApp/
│
├── Controllers/
│   └── ProductController.cs
│
├── Data/
│   └── AppDbContext.cs
│
├── Models/
│   ├── Product.cs
│   └── ProductDto.cs
│
├── Migrations/              👈 (dotnet ef migrations add ku apram auto-generate aagum)
│
├── wwwroot/
│   └── uploads/              👈 (uploaded images ithula store aagum)
│
├── appsettings.json
├── appsettings.Development.json
├── Program.cs
└── MyCrudApp.csproj

Step 1: Project & Packages Setup

dotnet new webapi -n MyCrudApp
cd MyCrudApp
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools
dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet add package Swashbuckle.AspNetCore

Design package illama, dotnet ef migrations add command work aagathu — idhu miss pannama add pannunga.

Step 2: Models (Models/Product.cs)

namespace MyCrudApp.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public string Category { get; set; }
        public decimal Price { get; set; }
        public int StockQuantity { get; set; }
        public string ImageUrl { get; set; }
    }
}

Models/ProductDto.cs (Request Model with File)

using Microsoft.AspNetCore.Http;

namespace MyCrudApp.Models
{
    public class ProductDto
    {
        public string Name { get; set; }
        public string Description { get; set; }
        public string Category { get; set; }
        public decimal Price { get; set; }
        public int StockQuantity { get; set; }
        public IFormFile? ImageFile { get; set; } // '?' na Optional (updates ku)
    }
}

Step 3: Data/AppDbContext.cs (Missing piece — idhu illama app run aagathu)

using Microsoft.EntityFrameworkCore;
using MyCrudApp.Models;

namespace MyCrudApp.Data
{
    public class AppDbContext : DbContext
    {
        public AppDbContext(DbContextOptions<AppDbContext> options) : base(options)
        {
        }

        public DbSet<Product> Products { get; set; }
    }
}

Step 4: appsettings.json (Connection String add pannunga)

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=localhost;Database=MyCrudAppDb;Trusted_Connection=True;TrustServerCertificate=True;"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

Local-la SQL Server illana, Server=localhost ku pathila unga SQL Server instance name podunga (e.g. Server=.\\SQLEXPRESS). SQL auth use panra pakshathula User Id=sa;Password=YourPassword; nu maathi podunga.

Step 5: Program.cs (Swagger & Static Files Setup)

using Microsoft.EntityFrameworkCore;
using MyCrudApp.Data;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddDbContext<AppDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();

// Swagger (Swashbuckle) Setup
builder.Services.AddSwaggerGen();

var app = builder.Build();

// Swagger UI Enable panrom
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseStaticFiles(); // Image url browser-la view panna must
app.UseAuthorization();
app.MapControllers();
app.Run();

Step 6: The Ultimate CRUD Controller (Controllers/ProductController.cs)

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using MyCrudApp.Data;
using MyCrudApp.Models;

namespace MyCrudApp.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ProductController : ControllerBase
    {
        private readonly AppDbContext _context;
        private readonly IWebHostEnvironment _env;

        public ProductController(AppDbContext context, IWebHostEnvironment env)
        {
            _context = context;
            _env = env;
        }

        // 1. CREATE (POST)
        [HttpPost]
        public async Task<IActionResult> CreateProduct([FromForm] ProductDto dto)
        {
            string imageUrl = "";
            if (dto.ImageFile != null && dto.ImageFile.Length > 0)
            {
                imageUrl = await SaveImage(dto.ImageFile);
            }

            var product = new Product
            {
                Name = dto.Name,
                Description = dto.Description,
                Category = dto.Category,
                Price = dto.Price,
                StockQuantity = dto.StockQuantity,
                ImageUrl = imageUrl
            };

            _context.Products.Add(product);
            await _context.SaveChangesAsync();
            return Ok(product);
        }

        // 2. READ ALL (GET)
        [HttpGet]
        public async Task<IActionResult> GetProducts()
        {
            return Ok(await _context.Products.ToListAsync());
        }

        // 2.1 READ BY ID (GET)
        [HttpGet("{id}")]
        public async Task<IActionResult> GetProduct(int id)
        {
            var product = await _context.Products.FindAsync(id);
            if (product == null) return NotFound();
            return Ok(product);
        }

        // 3. UPDATE (PUT)
        [HttpPut("{id}")]
        public async Task<IActionResult> UpdateProduct(int id, [FromForm] ProductDto dto)
        {
            var product = await _context.Products.FindAsync(id);
            if (product == null) return NotFound();

            // Puthu image anuppi irundha, pazhaya image-a delete panni puthusa save pannanum
            if (dto.ImageFile != null && dto.ImageFile.Length > 0)
            {
                DeleteImage(product.ImageUrl);
                product.ImageUrl = await SaveImage(dto.ImageFile);
            }

            product.Name = dto.Name;
            product.Description = dto.Description;
            product.Category = dto.Category;
            product.Price = dto.Price;
            product.StockQuantity = dto.StockQuantity;

            await _context.SaveChangesAsync();
            return Ok(product);
        }

        // 4. DELETE (DELETE)
        [HttpDelete("{id}")]
        public async Task<IActionResult> DeleteProduct(int id)
        {
            var product = await _context.Products.FindAsync(id);
            if (product == null) return NotFound();

            // Database-la data delete aaga munnadi, server folder-la irundhu image-a delete panrom
            DeleteImage(product.ImageUrl);

            _context.Products.Remove(product);
            await _context.SaveChangesAsync();
            return Ok(new { message = "Product and Image deleted successfully!" });
        }

        // --- Helper Methods ---
        private async Task<string> SaveImage(IFormFile file)
        {
            var uploadsFolder = Path.Combine(_env.WebRootPath, "uploads");
            if (!Directory.Exists(uploadsFolder)) Directory.CreateDirectory(uploadsFolder);

            var uniqueFileName = Guid.NewGuid().ToString() + "_" + file.FileName;
            var filePath = Path.Combine(uploadsFolder, uniqueFileName);

            using (var stream = new FileStream(filePath, FileMode.Create))
            {
                await file.CopyToAsync(stream);
            }
            return $"{Request.Scheme}://{Request.Host}/uploads/{uniqueFileName}";
        }

        private void DeleteImage(string imageUrl)
        {
            if (string.IsNullOrEmpty(imageUrl)) return;
            var fileName = Path.GetFileName(new Uri(imageUrl).LocalPath);
            var filePath = Path.Combine(_env.WebRootPath, "uploads", fileName);
            if (System.IO.File.Exists(filePath))
            {
                System.IO.File.Delete(filePath);
            }
        }
    }
}

Step 7: Database Create Panra Steps (Migration)

Controller and DbContext ready aana apparam, database-a physically create pannanum:

dotnet ef migrations add InitialCreate
dotnet ef database update

Idhu run panna apparam, Products table unga SQL Server database-la automatic-a create aagidum.

wwwroot/uploads folder-a manually create panni vachikonga (illana git-la empty folder track aagathu — venumna .gitkeep file podunga).

Step 8: Swagger-la Test Panra Steps

App-a run pannitu (dotnet run), browser-la http://localhost:<port>/swagger open pannunga.

CREATE (POST)
POST /api/Product → Try it out → Fields fill pannunga → Image choose pannunga → Execute. Data save aagum.

READ (GET)
GET /api/Product → Try it out → Execute. Save aana ella data-vum JSON format-la varum. Athula irukka id-a note panni vachikonga.

UPDATE (PUT)
PUT /api/Product/{id} → Try it out → Note panna id-a mela enter pannunga. Kela form-la details-a maathi (e.g., Price increase pannunga), vera puthu image select pannitu → Execute. Ippo paathingana pazhaya image unga local folder-la irundhu automatic-a delete aagi puthu image vanthurukum!

DELETE (DELETE)
DELETE /api/Product/{id} → Try it out → id enter panni Execute. Database-la irundhu data-vum poidum, unga wwwroot/uploads folder-la irundhu antha specific image-um delete aagidum.

🧠 Quick Recap (Article-ku Highlights)

✅ Swagger UI auto-generated API docs
✅ IFormFile mூlam multipart/form-data image upload
✅ EF Core Code-First approach with Migrations
✅ Old image cleanup logic on Update & Delete
✅ Clean separation: Models / DTOs / Data / Controllers

Intha structure follow pannina, unga dev.to article production-ready backend guide-a maarum. All the best! 🚀

Build a Complete MERN Stack CRUD App with Image Upload (Step-by-Step)

mass status — Fri, 26 Jun 2026 09:36:51 +0000

MERN Stack CRUD App - Setup Guide 🛠️

(1) Create Main Folder & Open VS Code

Un system-la edhavadhu oru drive-la mern-crud-interview nu oru pudhu folder create pannu. Andha folder-ah apdiye drag panni VS Code-kulla podu (illana VS Code-la File -> Open Folder kuduthu open pannikko).

(2) Setup Backend Folder

VS Code-la mela irukka menu-la Terminal → New Terminal open pannu. Kela terminal open aagum. Anga indha commands-ah varisaiyaa type panni Enter adi:

Commands:

mkdir backend

(Backend-kku oru folder create pandrom)

cd backend

(Andha folder-kulla porom)

npm init -y

(Node.js project-ah initialize pandrom. Ippo package.json file create aagidum)

(3) Install Backend Packages

Ache terminal-la (backend folder-kulla irukkum pothu) indha command-ah run pannu:

npm install express mongoose cors multer dotenv

Idhu mudinejdhum, automatic server restart-kaga idhaiyum install pannu:

npm install nodemon --save-dev

(4) Setup Frontend (React with Vite)

Ippo un terminal-la backend folder-la iruppa. Athai vittu veliya vara cd .. nu type panni Enter adi. Ippo main folder-kku vandhuduvai.

Inga namma React project create panna porom (Fast-aah irukka Vite use pandrom):

Commands:

npm create vite@latest frontend -- --template react

(React project create panna porom)

cd frontend

(Frontend folder-kulla porom)

npm install

(React-kku thevayana basic files install aagum)

npm install axios react-router-dom

(API call-kku Axios, routing-kku React Router install aagum)

✅ Setup Complete!

Build a Complete MERN Stack CRUD App with Image Upload (Step-by-Step)

This is a complete step-by-step guide to building a MERN Stack CRUD application with Image Upload using Multer. Let's dive right into the structure and code!

📂 The Complete Folder Structure

mern-crud-app/
│
├── backend/
│   ├── models/
│   │   └── Employee.js
│   ├── routes/
│   │   └── employeeRoutes.js
│   ├── uploads/               (Make sure to create this empty folder)
│   ├── .env
│   └── server.js
│
└── frontend/
    └── src/
        ├── components/
        │   └── EmployeeManager.jsx
        ├── App.jsx
        └── index.css

⚙️ Part 1: Backend Code

1. backend/.env

PORT=5000
MONGO_URI=mongodb://127.0.0.1:27017/mock-crud

2. backend/server.js

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
require('dotenv').config();

const app = express();

// Middlewares
app.use(cors());
app.use(express.json());

// Setup static folder for frontend image access
app.use('/uploads', express.static('uploads'));

// Routes
const employeeRoutes = require('./routes/employeeRoutes');
app.use('/api/employees', employeeRoutes);

// MongoDB Connection
mongoose.connect(process.env.MONGO_URI)
  .then(() => console.log('MongoDB Connected Successfully! ✅'))
  .catch((err) => console.log('MongoDB Connection Failed ❌', err));

app.get('/', (req, res) => {
  res.send('Backend Server is Running! 🚀');
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

3. backend/models/Employee.js

const mongoose = require('mongoose');

const employeeSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  phone: { type: String, required: true },
  designation: { type: String, required: true },
  experience: { type: Number, required: true },
  salary: { type: Number, required: true },
  image: { type: String, required: true } 
}, { timestamps: true });

module.exports = mongoose.model('Employee', employeeSchema);

4. backend/routes/employeeRoutes.js

const express = require('express');
const multer = require('multer');
const Employee = require('../models/Employee');
const router = express.Router();

// Multer Setup
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/'); 
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname); 
  }
});
const upload = multer({ storage: storage });

// 1. CREATE
router.post('/', upload.single('image'), async (req, res) => {
  try {
    const { name, email, phone, designation, experience, salary } = req.body;
    if (!req.file) return res.status(400).json({ message: 'Image is required' });

    const newEmployee = new Employee({
      name, email, phone, designation, experience, salary,
      image: req.file.filename
    });
    await newEmployee.save();
    res.status(201).json({ message: 'Employee added!', employee: newEmployee });
  } catch (error) {
    res.status(500).json({ message: 'Error saving employee', error: error.message });
  }
});

// 2. READ
router.get('/', async (req, res) => {
  try {
    const employees = await Employee.find();
    res.status(200).json(employees);
  } catch (error) {
    res.status(500).json({ message: 'Error fetching data', error: error.message });
  }
});

// 3. UPDATE
router.put('/:id', upload.single('image'), async (req, res) => {
  try {
    const { name, email, phone, designation, experience, salary } = req.body;
    let updateData = { name, email, phone, designation, experience, salary };

    if (req.file) {
      updateData.image = req.file.filename;
    }

    const updatedEmployee = await Employee.findByIdAndUpdate(req.params.id, updateData, { new: true });
    res.status(200).json({ message: 'Employee updated!', employee: updatedEmployee });
  } catch (error) {
    res.status(500).json({ message: 'Error updating employee', error: error.message });
  }
});

// 4. DELETE
router.delete('/:id', async (req, res) => {
  try {
    await Employee.findByIdAndDelete(req.params.id);
    res.status(200).json({ message: 'Employee deleted!' });
  } catch (error) {
    res.status(500).json({ message: 'Error deleting employee', error: error.message });
  }
});

module.exports = router;

🎨 Part 2: Frontend Code (Inside frontend/src folder)

1. frontend/src/index.css

body {
  background-color: #ffffff;
  color: #222222;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

input {
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 5px;
  width: 100%;
  box-sizing: border-box;
}

input:focus {
  outline: none;
  border-color: #0000ff;
}

button {
  cursor: pointer;
}

2. frontend/src/App.jsx

import EmployeeManager from './components/EmployeeManager';

function App() {
  return (
    <div>
      <center>
        <h1 style={ { color: '#333', marginTop: '20px', fontFamily: 'sans-serif' } }>
          MERN Employee Dashboard 🚀
        </h1>
      </center>
      <EmployeeManager />
    </div>
  );
}

export default App;

3. frontend/src/components/EmployeeManager.jsx

import { useState, useEffect } from 'react';
import axios from 'axios';
import '../index.css'; 

const EmployeeManager = () => {
  const [employees, setEmployees] = useState([]); 
  const [formData, setFormData] = useState({
    name: '', email: '', phone: '', designation: '', experience: '', salary: ''
  });
  const [image, setImage] = useState(null);
  const [editId, setEditId] = useState(null); 

  const fetchEmployees = async () => {
    try {
      const response = await axios.get('http://localhost:5000/api/employees');
      setEmployees(response.data);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };

  useEffect(() => {
    fetchEmployees();
  }, []); 

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleFileChange = (e) => {
    setImage(e.target.files[0]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const submitData = new FormData();

    for (let key in formData) {
      submitData.append(key, formData[key]);
    }
    if (image) submitData.append('image', image);

    try {
      if (editId) {
        await axios.put(`http://localhost:5000/api/employees/${editId}`, submitData, {
          headers: { 'Content-Type': 'multipart/form-data' }
        });
        alert('Employee Updated Successfully! ✏️');
      } else {
        await axios.post('http://localhost:5000/api/employees', submitData, {
          headers: { 'Content-Type': 'multipart/form-data' }
        });
        alert('Employee Added Successfully! 🎉');
      }

      setFormData({ name: '', email: '', phone: '', designation: '', experience: '', salary: '' });
      setImage(null);
      setEditId(null); 
      fetchEmployees(); 

    } catch (error) {
      alert('Failed to save data ❌');
    }
  };

  const handleDelete = async (id) => {
    if (window.confirm("Are you sure you want to delete this employee? 🗑️")) {
      try {
        await axios.delete(`http://localhost:5000/api/employees/${id}`);
        fetchEmployees(); 
      } catch (error) {
        alert("Delete failed!");
      }
    }
  };

  const handleEditClick = (emp) => {
    setFormData({
      name: emp.name, email: emp.email, phone: emp.phone, 
      designation: emp.designation, experience: emp.experience, salary: emp.salary
    });
    setEditId(emp._id); 
  };

  return (
    <div style={ { padding: '20px', maxWidth: '800px', margin: 'auto', fontFamily: 'sans-serif' } }>

      {/* FORM */}
      <h2>{editId ? "Edit Employee" : "Add New Employee"}</h2>
      <form onSubmit={handleSubmit} style={ { display: 'grid', gap: '10px', marginBottom: '30px' } }>
        <input type="text" name="name" placeholder="Name" value={formData.name} onChange={handleChange} required />
        <input type="email" name="email" placeholder="Email" value={formData.email} onChange={handleChange} required />
        <input type="number" name="phone" placeholder="Phone" value={formData.phone} onChange={handleChange} required />
        <input type="text" name="designation" placeholder="Designation" value={formData.designation} onChange={handleChange} required />
        <input type="number" name="experience" placeholder="Experience (Years)" value={formData.experience} onChange={handleChange} required />
        <input type="number" name="salary" placeholder="Salary" value={formData.salary} onChange={handleChange} required />
        <input type="file" accept="image/*" onChange={handleFileChange} required={!editId} />

        <button type="submit" style={ { padding: '10px', background: editId ? 'orange' : 'blue', color: 'white', border: 'none' } }>
          {editId ? "Update Employee" : "Save Employee"}
        </button>
        {editId && <button type="button" onClick={() => { setEditId(null); setFormData({name: '', email: '', phone: '', designation: '', experience: '', salary: ''}) }}>Cancel Edit</button>}
      </form>

      <hr />

      {/* TABLE */}
      <h2>Employee List</h2>
      <table border="1" width="100%" cellPadding="10" style={ { textAlign: 'left', borderCollapse: 'collapse' } }>
        <thead>
          <tr style={ { background: '#333', color: 'white' } }>
            <th>Image</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Designation</th>
            <th>Exp.</th>
            <th>Salary</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {employees.length > 0 ? (
            employees.map((emp) => (
              <tr key={emp._id}>
                <td>
                  <img src={`http://localhost:5000/uploads/${emp.image}`} alt="Profile" style={ { width: '50px', height: '50px', borderRadius: '50%' } } />
                </td>
                <td>{emp.name}</td>
                <td>{emp.email}</td>
                <td>{emp.phone}</td>
                <td>{emp.designation}</td>
                <td>{emp.experience} Yrs</td>
                <td>₹{emp.salary}</td>
                <td>
                  <button onClick={() => handleEditClick(emp)} style={ { marginRight: '10px', padding: '5px 10px', background: 'green', color: 'white', border: 'none' } }>Edit ✏️</button>
                  <button onClick={() => handleDelete(emp._id)} style={ { padding: '5px 10px', background: 'red', color: 'white', border: 'none' } }>Delete 🗑️</button>
                </td>
              </tr>
            ))
          ) : (
            <tr><td colSpan="8" style={ { textAlign: 'center' } }>No Employees Found</td></tr>
          )}
        </tbody>
      </table>
    </div>
  );
};

export default EmployeeManager;

🚀 Key Points to Remember

Multer Configuration - Images are stored in the uploads/ folder
CORS Setup - Backend allows frontend requests from any origin
Image Access - Frontend accesses images via http://localhost:5000/uploads/filename
Edit Functionality - Image update is optional during edit
Validation - Image is required during creation but optional during update

Happy coding! 🎉

Troubleshooting Tips:

Make sure MongoDB is running locally
Create the uploads folder manually in the backend directory
Install all dependencies: npm install express mongoose cors multer dotenv
Use npm install for frontend dependencies too