আপলোড করা ফাইলের জন্য Server-side Storage ব্যবস্থা

MeanJS স্ট্যাক ব্যবহার করে ফাইল আপলোড এবং Server-side Storage ব্যবস্থাপনা একটি গুরুত্বপূর্ণ কার্যকলাপ, যা ডাইনামিক ওয়েব অ্যাপ্লিকেশনগুলিতে ফাইল সংরক্ষণ এবং পরিচালনা করার জন্য ব্যবহৃত হয়। সাধারণত, ফাইলগুলির জন্য local server storage অথবা cloud storage ব্যবহৃত হতে পারে। এখানে, আমরা MeanJS স্ট্যাকের মধ্যে server-side storage ব্যবস্থাপনা দেখাবো।

File Uploading with Server-Side Storage in MeanJS

MeanJS স্ট্যাকের মধ্যে ফাইল আপলোড করার জন্য Multer প্যাকেজটি সাধারণত ব্যবহৃত হয়। Multer একটি Node.js middleware যা ফাইল আপলোডের প্রক্রিয়া সহজ করে।

এখানে আমরা Express.js এর মাধ্যমে ফাইল আপলোড করবো এবং সেই ফাইলগুলো local server-এ সংরক্ষণ করবো।

প্রথমে প্রয়োজনীয় প্যাকেজ ইনস্টল করা

ফাইল আপলোডের জন্য প্রথমে multer প্যাকেজটি ইনস্টল করতে হবে।

npm install multer

Multer Setup: File Upload Handling

1. Multer Setup

এখন, multer ব্যবহার করে ফাইল আপলোডের জন্য server-side সেটআপ করতে হবে।

// server/config/multer.js

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

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

// ফাইল আপলোডের কনফিগারেশন
const upload = multer({
  storage: storage,
  limits: { fileSize: 10 * 1024 * 1024 },  // ফাইলের সাইজ লিমিট ১০MB
  fileFilter: (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 (extname && mimetype) {
      return cb(null, true);
    } else {
      return cb(new Error('Only images are allowed!'));
    }
  }
});

module.exports = upload;

এখানে:

• destination: ফাইলগুলো uploads/ ফোল্ডারে সংরক্ষণ হবে।
• filename: ফাইলের নাম আপলোডের সময় বর্তমান সময় (timestamp) দিয়ে সেট করা হবে, যাতে প্রতিটি ফাইলের নাম ইউনিক হয়।
• fileSize: ফাইল সাইজ ১০MB এর বেশি হলে আপলোড হবে না।
• fileFilter: শুধুমাত্র jpeg, jpg, png, gif ধরনের ফাইল অনুমোদিত।

2. File Upload Route

এখন, আমরা Express.js রাউট তৈরি করব যেখানে ফাইল আপলোড করার রিকোয়েস্ট গ্রহণ করা হবে।

// server/routes/file.routes.js

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

// ফাইল আপলোড রাউট
router.post('/upload', upload.single('file'), (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.single('file'): এটা একক ফাইল আপলোড করতে ব্যবহৃত হয়। 'file' হল ফাইল ফর্ম ফিল্ডের নাম।
• রেসপন্স হিসেবে আপলোড হওয়া ফাইলের তথ্য পাঠানো হবে।

3. Express.js এ রাউট যুক্ত করা

এখন, আমরা রাউটটি server.js ফাইলে যুক্ত করবো।

// server.js

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

// Middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

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

// সার্ভার চালানো
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

এখানে, /api/upload রাউটে ফাইল আপলোডের রিকোয়েস্ট গ্রহণ করা হবে।

4. Frontend: Angular - File Uploading

এখন, আমরা Angular ফ্রন্টএন্ডে ফাইল আপলোডের জন্য একটি সিম্পল ফর্ম তৈরি করবো।

file-upload.component.ts

// src/app/file-upload/file-upload.component.ts

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

@Component({
  selector: 'app-file-upload',
  template: `
    <div>
      <h2>Upload File</h2>
      <form (submit)="onSubmit()">
        <input type="file" (change)="onFileChange($event)" required />
        <button type="submit">Upload</button>
      </form>
    </div>
  `
})
export class FileUploadComponent {
  selectedFile: File = null;

  constructor(private http: HttpClient) {}

  // ফাইল সিলেক্ট করা
  onFileChange(event) {
    this.selectedFile = event.target.files[0];
  }

  // ফাইল সাবমিট করা
  onSubmit() {
    const formData = new FormData();
    formData.append('file', this.selectedFile, this.selectedFile.name);

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

এখানে:

• onFileChange: ফাইল নির্বাচন করার পর সেই ফাইল selectedFile এ সংরক্ষিত হবে।
• onSubmit: ফর্ম সাবমিট করার পর selectedFile একটি FormData অবজেক্টে যোগ করে POST রিকোয়েস্ট পাঠানো হবে।

file-upload.component.html

<form (submit)="onSubmit()">
  <input type="file" (change)="onFileChange($event)" required />
  <button type="submit">Upload</button>
</form>

এখানে, ফাইল সিলেক্টর এবং সাবমিট বোতাম তৈরি করা হয়েছে।

5. File Uploading: Testing

এখন, সার্ভার এবং ফ্রন্টএন্ড অ্যাপ্লিকেশন চালু করে ফাইল আপলোড করার পরীক্ষা করা যেতে পারে।

1. সার্ভার চালু করতে:

node server.js

2. Angular অ্যাপ্লিকেশন চালু করতে:

ng serve

এখন, ব্রাউজারে গিয়ে ফাইল আপলোড ফর্ম ব্যবহার করে ফাইল আপলোড করা যাবে। আপলোড হওয়া ফাইলটি uploads/ ফোল্ডারে সংরক্ষিত হবে।

সারাংশ

এখন আপনি জানেন কিভাবে MeanJS স্ট্যাক ব্যবহার করে ফাইল আপলোড এবং server-side storage ব্যবস্থাপনা করা যায়। Multer মডিউল ব্যবহার করে সহজেই ফাইল আপলোড করা যায় এবং local server storage-এ সেগুলি সংরক্ষিত হয়। Angular ফ্রন্টএন্ড থেকে ফাইল আপলোড করার মাধ্যমে, আপনি একটি সম্পূর্ণ ফাইল আপলোড সিস্টেম তৈরি করতে পারবেন যা আপনার অ্যাপ্লিকেশনের প্রয়োজনীয়তা পূর্ণ করবে।