Building a File Upload API in MERN

 Sure! Here's a step-by-step guide to building a File Upload API using the MERN stack (MongoDB, Express.js, React, Node.js):


🔧 Tech Stack

Frontend: React


Backend: Node.js with Express.js


Database: MongoDB (to store file metadata)


File Storage: Local filesystem (for simplicity) or cloud (e.g., AWS S3 – optional upgrade)


📁 Project Structure

css

Copy

Edit

mern-file-upload/

├── backend/

│   ├── uploads/

│   ├── routes/

│   │   └── upload.js

│   ├── app.js

│   └── ...

└── frontend/

    └── src/

        └── components/

            └── FileUpload.js

🛠️ 1. Backend Setup (Node.js + Express)

1.1 Initialize Project

bash

Copy

Edit

mkdir backend && cd backend

npm init -y

npm install express multer mongoose cors

1.2 app.js - Main Express Server

js

Copy

Edit

const express = require('express');

const cors = require('cors');

const mongoose = require('mongoose');

const uploadRoute = require('./routes/upload');


const app = express();

const PORT = 5000;


app.use(cors());

app.use(express.json());

app.use('/uploads', express.static('uploads'));

app.use('/api/upload', uploadRoute);


mongoose.connect('mongodb://localhost:27017/fileuploads', {

  useNewUrlParser: true,

  useUnifiedTopology: true,

}).then(() => console.log('MongoDB connected'))

  .catch(err => console.log(err));


app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

1.3 routes/upload.js

js

Copy

Edit

const express = require('express');

const multer = require('multer');

const router = express.Router();


// Storage config

const storage = multer.diskStorage({

  destination: (req, file, cb) => cb(null, 'uploads/'),

  filename: (req, file, cb) => cb(null, Date.now() + '-' + file.originalname),

});


const upload = multer({ storage });


// File Upload Route

router.post('/', upload.single('file'), (req, res) => {

  if (!req.file) return res.status(400).json({ error: 'No file uploaded' });


  res.json({

    filename: req.file.filename,

    path: req.file.path,

    size: req.file.size,

    mimetype: req.file.mimetype,

  });

});


module.exports = router;

💻 2. Frontend Setup (React)

2.1 Create React App

bash

Copy

Edit

npx create-react-app frontend

cd frontend

npm install axios

2.2 FileUpload.js Component

jsx

Copy

Edit

import React, { useState } from 'react';

import axios from 'axios';


const FileUpload = () => {

  const [file, setFile] = useState(null);

  const [uploadedData, setUploadedData] = useState(null);


  const handleChange = (e) => {

    setFile(e.target.files[0]);

  };


  const handleUpload = async () => {

    const formData = new FormData();

    formData.append('file', file);


    try {

      const res = await axios.post('http://localhost:5000/api/upload', formData);

      setUploadedData(res.data);

    } catch (err) {

      console.error(err);

    }

  };


  return (

    <div>

      <h2>Upload File</h2>

      <input type="file" onChange={handleChange} />

      <button onClick={handleUpload}>Upload</button>


      {uploadedData && (

        <div>

          <h4>Uploaded:</h4>

          <p>File: {uploadedData.filename}</p>

          <p>Type: {uploadedData.mimetype}</p>

          <a href={`http://localhost:5000/${uploadedData.path}`} target="_blank" rel="noreferrer">View File</a>

        </div>

      )}

    </div>

  );

};


export default FileUpload;

2.3 Use the Component

In App.js:


jsx

Copy

Edit

import React from 'react';

import FileUpload from './components/FileUpload';


function App() {

  return (

    <div className="App">

      <FileUpload />

    </div>

  );

}


export default App;

🧪 Testing

Start MongoDB (mongod).


Run the backend:


bash

Copy

Edit

node app.js

Run the frontend:


bash

Copy

Edit

npm start

Open browser at http://localhost:3000 and upload a file.


🚀 Next Steps / Improvements

Validate file types and sizes


Store file metadata in MongoDB


Add progress bar


Use cloud storage like AWS S3 or Cloudinary


Add user authentication

Learn MERN Stack Course in Hyderabad

Read More

Setting Up WebSockets with Node and Express

Caching Data with Redis in Node.js

Using Aggregations in MongoDB

Creating Relationships in MongoDB using Mongoose

Visit Our Quality Thought Training in Hyderabad

Get Directions

Comments

Post a Comment

Popular posts from this blog

Understanding Snowflake Editions: Standard, Enterprise, Business Critical

Understanding Snowflake Editions: Standard, Enterprise, Business Critical Snowflake offers several service editions to meet different business needs. These editions provide increasing levels of features, security, and compliance, depending on your organization's size, industry, and regulatory requirements. 1. Standard Edition Best for: Small to mid-sized teams or businesses that need core data warehousing features without advanced compliance needs. Key Features: Fully managed, cloud-native data platform Support for structured and semi-structured data Virtual warehouses for compute scaling Time Travel (1 day) – lets you query past versions of data Secure data sharing between Snowflake accounts Basic security with role-based access control Use Case Example: Startups or small companies analyzing business data without strict data compliance needs. 2. Enterprise Edition Best for: Organizations that need more control, scalability, and longer data retention. Includes everything in Standar...
Read more

Why Data Science Course?

Why Data Science Course? A Data Science course is valuable for several reasons: 1.Growing Job Market The demand for data scientists is increasing globally, with companies actively hiring professionals with data skills. Many industries, including healthcare, banking, and technology, rely on data science for better decision-making. 2. Diverse Career Options You can work as a Data Scientist, Data Analyst, Machine Learning Engineer, AI Specialist, Business Analyst, or Big Data Engineer. Data science skills are useful in various industries like finance, retail, healthcare, education, and sports analytics. 3. Develops Critical Thinking & Problem-Solving Skills A data science course helps you analyze complex problems, interpret data, and develop innovative solutions. Encourages logical reasoning, pattern recognition, and data-driven decision-making. 4. Learn Advanced Technologies & Tools Gain hands-on experience with tools like Python, R, SQL, TensorFlow, Tableau, Hadoop, and Power BI...
Read more

How To Do Medical Coding Course?

Medical coding is a great career choice, and there are different ways to get trained and certified. Here’s a step-by-step guide on how to do a medical coding course: Step 1: Understand Medical Coding Medical coding involves translating healthcare services, diagnoses, procedures, and equipment into standardized codes. These codes are used for billing and insurance purposes. Common coding systems: ICD-10-CM (Diagnosis Codes) CPT (Procedure Codes) HCPCS (Supplies & Services) Step 2: Choose the Right Course You can take medical coding courses from: Universities & Community Colleges (Online & In-person) Professional Organizations (AAPC, AHIMA) Online Platforms (Coursera, Udemy, edX) Step 3: Select a Certification Path The most recognized certifications include: Certified Professional Coder (CPC) – AAPC (Most popular) Certified Coding Specialist (CCS) – AHIMA (Hospital-based coding) Certified Inpatient Coder (CIC) – AAPC Certified Outpatient Coder (COC) – AAPC Step 4: Enroll in a...
Read more