Multer ব্যবহার করে ফাইল হ্যান্ডল করা

Multer একটি জনপ্রিয় Node.js middleware যা ফাইল আপলোডের জন্য ব্যবহৃত হয়। এটি Express.js অ্যাপ্লিকেশনে ফাইল হ্যান্ডলিং এবং আপলোড ব্যবস্থাপনা সহজ করে তোলে। Multer ব্যবহার করে আপনি multipart/form-data রিকুয়েস্টে ফাইল আপলোড করতে পারবেন, এবং এই ফাইলগুলো সার্ভারে সংরক্ষণ করতে পারবেন।

এখানে আমরা দেখব কিভাবে MeanJS স্ট্যাকের মধ্যে Multer ব্যবহার করে ফাইল আপলোড ও হ্যান্ডলিং করা যায়।

Multer সেটআপ এবং ইনস্টলেশন

প্রথমে, Multer প্যাকেজটি ইনস্টল করতে হবে:

npm install multer --save

এটি Multer প্যাকেজ ইনস্টল করবে, যা ফাইল আপলোডের জন্য ব্যবহৃত হবে।

Multer কনফিগারেশন এবং ফাইল আপলোড করা

ফাইল আপলোড করার জন্য Multer কনফিগারেশন এবং সঠিক স্টোরেজ প্রোপার্টি সেট করা প্রয়োজন।

1. Multer কনফিগারেশন

Multer এর মাধ্যমে ফাইল আপলোডের জন্য সাধারণত দুটি কনফিগারেশন ব্যবহার করা হয়:

1. DiskStorage: ফাইল ডিক্সে সংরক্ষিত হয়।
2. MemoryStorage: ফাইলকে মেমোরিতে সংরক্ষণ করা হয় (অস্থায়ীভাবে)।

এখানে DiskStorage ব্যবহার করে ফাইল আপলোড করার উদাহরণ দেখব।

// config/multer.config.js

const multer = require('multer');
const path = require('path');

// Multer স্টোরেজ কনফিগারেশন
const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, './uploads/');  // ফাইল যেখানে সেভ হবে
  },
  filename: function(req, file, cb) {
    cb(null, Date.now() + path.extname(file.originalname));  // ফাইলের নাম এবং এক্সটেনশন
  }
});

// Multer কনফিগারেশন
const upload = multer({
  storage: storage,
  limits: { fileSize: 10 * 1024 * 1024 },  // ফাইল সাইজের সীমা (10MB)
  fileFilter: function(req, file, cb) {
    const filetypes = /jpeg|jpg|png|gif/;  // অনুমোদিত ফাইল টাইপ
    const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
    const mimetype = filetypes.test(file.mimetype);

    if (mimetype && extname) {
      return cb(null, true);  // অনুমোদিত ফাইল
    } else {
      cb('Error: Images Only!');  // অনুমোদিত নয় এমন ফাইল
    }
  }
}).single('image');  // 'image' হলো ফাইলের ফিল্ড নাম

module.exports = upload;

এখানে:

• destination: ফাইল কোথায় সংরক্ষিত হবে, এটি uploads/ ফোল্ডারে সংরক্ষণ করবে।
• filename: ফাইলের নামের সাথে সময় যুক্ত করা হবে যাতে নামের দ্বন্দ্ব না হয়।
• limits: ফাইল সাইজ 10MB এর বেশি হতে পারবে না।
• fileFilter: কেবলমাত্র JPEG, JPG, PNG, GIF ফরম্যাটের ছবি আপলোড করা যাবে।

2. API রাউট তৈরি করা

এখন, ফাইল আপলোড করার জন্য একটি POST API রাউট তৈরি করা হবে। routes/file.routes.js ফাইলে ফাইল আপলোডের রাউট কনফিগার করা হবে:

// routes/file.routes.js

const express = require('express');
const router = express.Router();
const upload = require('../config/multer.config');  // Multer কনফিগারেশন ইমপোর্ট করা

// ফাইল আপলোড রাউট
router.post('/upload', upload, (req, res) => {
  if (!req.file) {
    return res.status(400).send({ message: 'No file uploaded' });
  }
  res.status(200).send({
    message: 'File uploaded successfully',
    file: req.file // ফাইলের তথ্য রিটার্ন করা
  });
});

module.exports = router;

এখানে:

• upload মিডলওয়্যার ব্যবহার করা হয়েছে যা ফাইল আপলোডের কাজ করবে।
• POST /upload রাউটে ফাইল আপলোড হবে, এবং সফলভাবে আপলোড হলে ফাইলের তথ্য রিটার্ন করা হবে।

3. API রাউট Express অ্যাপ্লিকেশনে যুক্ত করা

এখন, আমাদের file.routes.js ফাইলটি app.js এ যুক্ত করতে হবে, যাতে এই রাউটটি অ্যাপ্লিকেশনে ব্যবহৃত হয়:

// server/app.js

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const fileRoutes = require('./routes/file.routes');  // ফাইল রাউট ইমপোর্ট করা

const app = express();

// Body parser middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// Multer ব্যবহার করে আপলোড ফোল্ডার তৈরি করা
app.use('/uploads', express.static('uploads'));  // আপলোড করা ফাইলের অ্যাক্সেস পেতে

// MongoDB কানেকশন
mongoose.connect('mongodb://localhost:27017/meanjs', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => {
    console.log('MongoDB connected');
  })
  .catch(err => {
    console.log('MongoDB connection error:', err);
  });

// ফাইল রাউট ব্যবহার করা
app.use('/api', fileRoutes);

// Port সেট করা
const port = 3000;
app.listen(port, () => {
  console.log('Server running on port ' + port);
});

এখানে, /uploads রাউট ব্যবহার করে আপলোড করা ফাইলগুলির অ্যাক্সেস করা যাবে।

4. ফ্রন্টএন্ড থেকে ফাইল আপলোড করা

এখন, AngularJS ফ্রন্টএন্ড থেকে ফাইল আপলোড করার জন্য HttpClient ব্যবহার করা হবে। প্রথমে, app.component.ts ফাইলে একটি ফর্ম তৈরি করতে হবে, যা ফাইল সিলেকশন এবং সাবমিশন পরিচালনা করবে।

// src/app/app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
    <h1>File Upload</h1>
    <form (ngSubmit)="onSubmit()" enctype="multipart/form-data">
      <input type="file" (change)="onFileChange($event)" required />
      <button type="submit">Upload</button>
    </form>
    <div *ngIf="message">{{ message }}</div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  file: File | null = null;
  message: string = '';

  constructor(private http: HttpClient) {}

  onFileChange(event: any) {
    this.file = event.target.files[0];
  }

  onSubmit() {
    if (this.file) {
      const formData = new FormData();
      formData.append('image', this.file, this.file.name);

      this.http.post('http://localhost:3000/api/upload', formData)
        .subscribe(
          (response: any) => {
            this.message = 'File uploaded successfully!';
          },
          (error) => {
            this.message = 'Error uploading file!';
          }
        );
    }
  }
}

এখানে:

• ফাইল সিলেকশন করার জন্য একটি ইনপুট ফিল্ড রয়েছে।
• onFileChange() ফাংশনটি ফাইল সিলেকশনের পর ফাইলটি সেট করে।
• onSubmit() ফাংশনটি ফাইলটি FormData এর মাধ্যমে সার্ভারে পাঠায়।

5. CORS কনফিগারেশন

যেহেতু Angular এবং Node.js সাধারণত আলাদা ডোমেইনে বা পোর্টে চলে, সেজন্য CORS (Cross-Origin Resource Sharing) কনফিগারেশন করা প্রয়োজন যাতে এই দুটি সিস্টেমের মধ্যে রিকুয়েস্ট বিনিময় সম্ভব হয়।

npm install cors --save

এখন, Express.js সার্ভারে CORS কনফিগার করুন:

// server/app.js

const cors = require('cors');

// CORS কনফিগারেশন
app.use(cors());

এটি সমস্ত ক্রস-অরিজিন রিকোয়েস্টকে অনুমোদন করবে, যা আপনার Angular অ্যাপ্লিকেশন থেকে Express.js API এর সাথে যোগাযোগ করতে সহায়ক।

সারাংশ

Multer ব্যবহারের মাধ্যমে MeanJS স্ট্যাকে ফাইল আপলোড ও হ্যান্ডলিং সহজে করা যায়। এখানে আমরা দেখেছি কিভাবে Multer কনফিগার করে ফাইল আপলোড করা যায়, এবং সেই ফাইলকে Express.js সার্ভারে সেভ করা যায়। আমরা ফ্রন্টএন্ডে Angular ব্যবহার করে ফাইল সিলেকশন এবং সাবমিশন করতে শিখেছি, এবং CORS কনফিগারেশন ব্যবহার করে নিরাপদভাবে ডেটা আদান-প্রদান করার পদ্ধতি দেখেছি।