MeanJS স্ট্যাকের মাধ্যমে ফাইল আপলোড এবং ইমেজ ম্যানেজমেন্ট করা একটি গুরুত্বপূর্ণ দিক, বিশেষ করে যখন অ্যাপ্লিকেশনগুলোতে ইউজারদের ফাইল বা ইমেজ আপলোড করার ফিচার থাকে। Node.js এবং Express.js ব্যাকএন্ডে ফাইল আপলোড এবং ইমেজ ম্যানেজমেন্ট পরিচালনা করতে ব্যবহৃত কিছু জনপ্রিয় লাইব্রেরি রয়েছে, যেমন Multer এবং Cloudinary। এখানে, আমরা Multer ব্যবহার করে ফাইল আপলোড এবং ইমেজ ম্যানেজমেন্টের পুরো প্রক্রিয়া দেখব।
Multer দিয়ে ফাইল আপলোড
Multer হল একটি Node.js লাইব্রেরি যা multipart/form-data এর মাধ্যমে ফাইল আপলোড করতে সহায়ক। এটি ফাইল সাইজ, MIME টাইপ, ফাইল স্টোরেজ লোকেশন ইত্যাদি কনফিগার করার জন্য ব্যবহার করা হয়।
ধাপ ১: Multer ইনস্টল করা
প্রথমে, Multer ইনস্টল করতে হবে:
npm install multer --save
ধাপ ২: Multer কনফিগারেশন
এখন, Express.js এ Multer কনফিগার করতে হবে। ফাইল আপলোডের জন্য আমরা কিছু কনফিগারেশন সেট করব, যেমন ফাইল স্টোরেজ (যেখানে ফাইল সংরক্ষিত হবে), ফাইলের আকার সীমা ইত্যাদি।
// server/config/multer.config.js
var multer = require('multer');
// স্টোরেজ কনফিগারেশন
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads'); // ফাইল যেখানে আপলোড হবে
},
filename: function (req, file, cb) {
cb(null, Date.now() + '-' + file.originalname); // ফাইলের নাম কাস্টমাইজ করা
}
});
// Multer কনফিগারেশন
var upload = multer({
storage: storage,
limits: { fileSize: 5 * 1024 * 1024 }, // সর্বোচ্চ ফাইল আকার (৫MB)
fileFilter: function (req, file, cb) {
const filetypes = /jpeg|jpg|png|gif/; // অনুমোদিত ফাইল টাইপ
const mimetype = filetypes.test(file.mimetype);
if (mimetype) {
return cb(null, true);
} else {
cb('Error: Only image files are allowed');
}
}
});
module.exports = upload;
এখানে multer.diskStorage ব্যবহার করে আপলোড করা ফাইলের স্টোরেজ লোকেশন এবং নাম নির্ধারণ করা হয়েছে। পাশাপাশি, ফাইল আকারের সীমা এবং অনুমোদিত ফাইল টাইপ কনফিগার করা হয়েছে।
ধাপ ৩: ফাইল আপলোড রাউট তৈরি করা
এখন, Express.js এ ফাইল আপলোড করার জন্য একটি রাউট তৈরি করতে হবে। এখানে আমরা Multer এর কনফিগারেশন ব্যবহার করে ফাইল আপলোড করব।
// server/routes/file.routes.js
var express = require('express');
var router = express.Router();
var upload = require('../config/multer.config');
// POST রিকোয়েস্ট: ফাইল আপলোড করা
router.post('/upload', upload.single('file'), function(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 হল ফাইল ইনপুটের নাম (যেমন HTML ফর্মে <input type="file" name="file">)।
ধাপ ৪: ফ্রন্টএন্ড (AngularJS) এ ফাইল আপলোড
ফ্রন্টএন্ডে ফাইল আপলোড করার জন্য, AngularJS এর মাধ্যমে একটি ফর্ম তৈরি করা যেতে পারে, যেখানে ইউজার ফাইল সিলেক্ট করে এবং সেই ফাইলটি POST রিকোয়েস্টের মাধ্যমে ব্যাকএন্ডে পাঠায়।
<!-- views/file-upload.html -->
<form enctype="multipart/form-data" ng-submit="uploadFile()">
<input type="file" ng-model="file" name="file" required />
<button type="submit">Upload</button>
</form>
এখন, AngularJS কন্ট্রোলারে $http সার্ভিস ব্যবহার করে ফাইলটি সার্ভারে পাঠানো হবে:
// public/js/controllers/file.controller.js
angular.module('meanApp')
.controller('FileController', function($scope, $http) {
$scope.uploadFile = function() {
var formData = new FormData();
formData.append("file", $scope.file);
$http.post('/api/upload', formData, {
headers: { 'Content-Type': undefined },
transformRequest: angular.identity
})
.then(function(response) {
alert('File uploaded successfully');
})
.catch(function(error) {
alert('Error uploading file: ' + error.message);
});
};
});
এখানে, FormData ব্যবহার করে ফাইল ডেটা তৈরি করা হচ্ছে এবং $http.post() মেথডের মাধ্যমে সার্ভারে পাঠানো হচ্ছে।
Image Management
ইমেজ ম্যানেজমেন্টে ইমেজ সংরক্ষণ, রিসাইজ করা, এবং ক্লাউড স্টোরেজে আপলোড করার মতো কার্যক্রম অন্তর্ভুক্ত থাকে। আপনি চাইলে Cloudinary বা AWS S3 এর মতো ক্লাউড প্ল্যাটফর্ম ব্যবহার করতে পারেন ইমেজ ম্যানেজমেন্টের জন্য।
Cloudinary দিয়ে ইমেজ আপলোড
Cloudinary একটি জনপ্রিয় ক্লাউড স্টোরেজ সেবা যা ইমেজ আপলোড এবং ম্যানেজমেন্টের জন্য ব্যবহৃত হয়। Cloudinary তে ফাইল আপলোড করতে Cloudinary SDK ব্যবহার করা হয়।
প্রথমে, Cloudinary ইনস্টল করতে হবে:
npm install cloudinary --save
এরপর, Cloudinary কনফিগারেশন এবং ফাইল আপলোড কোড:
// server/config/cloudinary.config.js
var cloudinary = require('cloudinary').v2;
// Cloudinary কনফিগারেশন
cloudinary.config({
cloud_name: 'your-cloud-name',
api_key: 'your-api-key',
api_secret: 'your-api-secret'
});
// ফাইল আপলোড ফাংশন
function uploadFile(filePath) {
return new Promise((resolve, reject) => {
cloudinary.uploader.upload(filePath, function(error, result) {
if (error) reject(error);
else resolve(result);
});
});
}
module.exports = uploadFile;
এখানে, Cloudinary API ব্যবহার করে ইমেজ আপলোড করা হচ্ছে এবং আপলোড করা ফাইলের URL রিটার্ন করা হবে।
সারাংশ
MeanJS স্ট্যাকের মাধ্যমে ফাইল আপলোড এবং ইমেজ ম্যানেজমেন্ট পরিচালনা করা সম্ভব। Multer ব্যবহার করে ফাইল আপলোড করা সহজ এবং ইমেজ ম্যানেজমেন্টের জন্য ক্লাউড স্টোরেজ সেবা যেমন Cloudinary ব্যবহার করা যেতে পারে। এটি ফাইল এবং ইমেজ ম্যানেজমেন্টের প্রক্রিয়াকে আরও সহজ, স্কেলেবল এবং সুরক্ষিত করে তোলে।
MeanJS স্ট্যাকের মধ্যে AngularJS (ফ্রন্টএন্ড) এবং Node.js + Express.js (ব্যাকএন্ড) এর মাধ্যমে ফাইল আপলোড করা সম্ভব। এটি সাধারণত Multer লাইব্রেরি ব্যবহার করে ব্যাকএন্ডে করা হয়, যা Express.js এর জন্য ফাইল আপলোড করতে সহায়ক।
এই প্রক্রিয়ায়, AngularJS ক্লায়েন্ট সাইড থেকে ফাইলটি সার্ভারে পাঠাবে এবং Node.js (Express.js) সার্ভারে Multer এর সাহায্যে ফাইলটি গ্রহণ ও সংরক্ষণ করবে।
এখানে AngularJS এবং Node.js এর মাধ্যমে ফাইল আপলোডের সম্পূর্ণ প্রক্রিয়া বিস্তারিতভাবে আলোচনা করা হয়েছে।
Step 1: Multer ইনস্টল করা (ব্যাকএন্ড)
Multer হল একটি Node.js লাইব্রেরি, যা Express.js অ্যাপ্লিকেশন দিয়ে ফাইল আপলোড করতে ব্যবহৃত হয়। প্রথমে, আপনার প্রজেক্টে Multer ইনস্টল করতে হবে।
npm install multer --save
Step 2: Multer সেটআপ করা
Multer লাইব্রেরি ব্যবহার করে ফাইল আপলোড সেটআপ করার জন্য, প্রথমে একটি upload.js ফাইল তৈরি করুন, যেখানে আপনি ফাইল আপলোডের কনফিগারেশন করবেন।
// server/config/upload.js
const multer = require('multer');
// স্টোরেজ কনফিগারেশন
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/'); // ফাইল সংরক্ষণের ডিরেক্টরি
},
filename: function (req, file, cb) {
cb(null, Date.now() + '-' + file.originalname); // ফাইলের নাম নির্ধারণ
}
});
// Multer সেটআপ
const upload = multer({ storage: storage });
module.exports = upload;
এখানে, multer.diskStorage ব্যবহার করে ফাইলের destination (কোথায় ফাইল সংরক্ষণ হবে) এবং filename (ফাইলের নাম কী হবে) কনফিগার করা হয়েছে।
Step 3: Express.js রাউট তৈরি করা
এখন, Express.js রাউট তৈরি করতে হবে, যেখানে ফাইল আপলোড করা হবে। নিচে একটি POST রাউট উদাহরণ দেওয়া হলো, যা ক্লায়েন্ট থেকে ফাইল গ্রহণ করবে এবং তা সেভ করবে।
// server/routes/file.routes.js
const express = require('express');
const router = express.Router();
const upload = require('../config/upload'); // Multer কনফিগারেশন
// ফাইল আপলোড রাউট
router.post('/upload', upload.single('file'), (req, res) => {
if (!req.file) {
return res.status(400).send('No file uploaded');
}
res.status(200).send({
message: 'File uploaded successfully',
file: req.file
});
});
module.exports = router;
এখানে, upload.single('file') ব্যবহৃত হচ্ছে, যেখানে 'file' হলো ফর্মের নাম (AngularJS ক্লায়েন্টে এই নামের সাথে ফাইলটি পাঠানো হবে)। যদি ফাইল সফলভাবে আপলোড হয়, তবে রেসপন্সে সফলতার বার্তা এবং ফাইলের তথ্য পাঠানো হবে।
Step 4: AngularJS ক্লায়েন্ট সাইড তৈরি করা
এখন, AngularJS এর মাধ্যমে ফাইল আপলোড করার জন্য একটি ফর্ম তৈরি করতে হবে, যেখানে ব্যবহারকারী ফাইল নির্বাচন করবে এবং তা ব্যাকএন্ডে পাঠাবে।
<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload</title>
</head>
<body ng-app="meanApp" ng-controller="FileUploadController">
<h1>Upload File</h1>
<form ng-submit="uploadFile()">
<input type="file" ng-model="file" name="file" required />
<button type="submit">Upload</button>
</form>
<div ng-if="message">
<p>{{ message }}</p>
</div>
</body>
</html>
এখানে, একটি ফাইল ইনপুট ফিল্ড এবং একটি submit বাটন দেওয়া হয়েছে, যা ফাইল আপলোডের জন্য ব্যবহৃত হবে। এখন AngularJS এর কন্ট্রোলারে ফাইল আপলোডের জন্য কোড লিখতে হবে।
Step 5: AngularJS কন্ট্রোলার তৈরি করা
AngularJS এর $http সার্ভিস ব্যবহার করে ফাইলটি ব্যাকএন্ডে পাঠাতে হবে। ফাইল আপলোড করার জন্য একটি কন্ট্রোলার তৈরি করুন।
// public/js/controllers/fileUpload.controller.js
angular.module('meanApp')
.controller('FileUploadController', function($scope, $http) {
// ফাইল আপলোড ফাংশন
$scope.uploadFile = function() {
var formData = new FormData();
formData.append('file', $scope.file); // ফাইল যুক্ত করা
$http.post('/api/upload', formData, {
headers: {
'Content-Type': undefined
}
})
.then(function(response) {
$scope.message = 'File uploaded successfully!';
console.log(response.data);
})
.catch(function(error) {
$scope.message = 'Error uploading file!';
console.log(error);
});
};
});
এখানে, আমরা FormData ব্যবহার করে ফাইলটি POST রিকোয়েস্টের মাধ্যমে ব্যাকএন্ডে পাঠাচ্ছি। এই রিকোয়েস্টে Content-Type: undefined সেট করা হচ্ছে কারণ আমরা FormData পাঠাচ্ছি, যা ফাইলের সাথে অন্যান্য ডেটা পাঠানোর জন্য উপযুক্ত।
Step 6: Express.js অ্যাপ্লিকেশনটি চালু করা
এখন, আপনাকে Express.js অ্যাপ্লিকেশন চালু করতে হবে এবং AngularJS ক্লায়েন্ট সাইডের সাথে সার্ভার সংযুক্ত করতে হবে।
// server.js
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const fileRoutes = require('./routes/file.routes');
// Body parser middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// Static folder for AngularJS
app.use(express.static('public'));
// File upload API
app.use('/api', fileRoutes);
// Start server
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});
এখানে, আমরা body-parser মডিউল ব্যবহার করছি ফাইলের ডেটা প্রসেস করতে এবং /api/upload রাউট দিয়ে ফাইল আপলোড সাপোর্ট করাচ্ছি।
সারাংশ
এখন, আপনার MeanJS অ্যাপ্লিকেশন AngularJS এবং Node.js (Express.js) এর মাধ্যমে ফাইল আপলোড করার জন্য প্রস্তুত। Multer লাইব্রেরি ব্যবহার করে ব্যাকএন্ডে ফাইলটি গ্রহণ এবং সংরক্ষণ করা হয়, এবং AngularJS থেকে FormData এর মাধ্যমে ফাইলটি সার্ভারে পাঠানো হয়। এটি খুবই কার্যকরী এবং জনপ্রিয় পদ্ধতি যেটি ব্যবহারকারীদের ফাইল আপলোডের সুযোগ দেয়।
Multer একটি জনপ্রিয় Node.js middleware যা ফাইল আপলোডের জন্য ব্যবহৃত হয়। এটি Express.js অ্যাপ্লিকেশনে ফাইল হ্যান্ডলিং এবং আপলোড ব্যবস্থাপনা সহজ করে তোলে। Multer ব্যবহার করে আপনি multipart/form-data রিকুয়েস্টে ফাইল আপলোড করতে পারবেন, এবং এই ফাইলগুলো সার্ভারে সংরক্ষণ করতে পারবেন।
এখানে আমরা দেখব কিভাবে MeanJS স্ট্যাকের মধ্যে Multer ব্যবহার করে ফাইল আপলোড ও হ্যান্ডলিং করা যায়।
Multer সেটআপ এবং ইনস্টলেশন
প্রথমে, Multer প্যাকেজটি ইনস্টল করতে হবে:
npm install multer --save
এটি Multer প্যাকেজ ইনস্টল করবে, যা ফাইল আপলোডের জন্য ব্যবহৃত হবে।
Multer কনফিগারেশন এবং ফাইল আপলোড করা
ফাইল আপলোড করার জন্য Multer কনফিগারেশন এবং সঠিক স্টোরেজ প্রোপার্টি সেট করা প্রয়োজন।
1. Multer কনফিগারেশন
Multer এর মাধ্যমে ফাইল আপলোডের জন্য সাধারণত দুটি কনফিগারেশন ব্যবহার করা হয়:
- DiskStorage: ফাইল ডিক্সে সংরক্ষিত হয়।
- 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 কনফিগারেশন ব্যবহার করে নিরাপদভাবে ডেটা আদান-প্রদান করার পদ্ধতি দেখেছি।
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
এখন, সার্ভার এবং ফ্রন্টএন্ড অ্যাপ্লিকেশন চালু করে ফাইল আপলোড করার পরীক্ষা করা যেতে পারে।
- সার্ভার চালু করতে:
node server.js
- Angular অ্যাপ্লিকেশন চালু করতে:
ng serve
এখন, ব্রাউজারে গিয়ে ফাইল আপলোড ফর্ম ব্যবহার করে ফাইল আপলোড করা যাবে। আপলোড হওয়া ফাইলটি uploads/ ফোল্ডারে সংরক্ষিত হবে।
সারাংশ
এখন আপনি জানেন কিভাবে MeanJS স্ট্যাক ব্যবহার করে ফাইল আপলোড এবং server-side storage ব্যবস্থাপনা করা যায়। Multer মডিউল ব্যবহার করে সহজেই ফাইল আপলোড করা যায় এবং local server storage-এ সেগুলি সংরক্ষিত হয়। Angular ফ্রন্টএন্ড থেকে ফাইল আপলোড করার মাধ্যমে, আপনি একটি সম্পূর্ণ ফাইল আপলোড সিস্টেম তৈরি করতে পারবেন যা আপনার অ্যাপ্লিকেশনের প্রয়োজনীয়তা পূর্ণ করবে।
Image Optimization এবং Displaying হল ওয়েব অ্যাপ্লিকেশন তৈরির একটি গুরুত্বপূর্ণ অংশ, কারণ এটি অ্যাপ্লিকেশনের লোডিং স্পিড এবং পারফরম্যান্স উন্নত করতে সাহায্য করে। MeanJS স্ট্যাক (MongoDB, Express.js, AngularJS, এবং Node.js) ব্যবহার করে আপনি ইমেজ আপলোড, অপটিমাইজেশন, এবং ডিসপ্লে করতে পারেন। এখানে, আমরা দেখব কিভাবে MeanJS এ ইমেজ অপটিমাইজেশন এবং ডিসপ্লে করা যায়।
Image Optimization কী?
Image Optimization হল একটি প্রক্রিয়া যার মাধ্যমে ইমেজের আকার কমিয়ে ফেলা হয়, তবে তার কোয়ালিটি বজায় থাকে। এর মাধ্যমে ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইটের লোড টাইম কমে, যার ফলে ব্যবহারকারীর অভিজ্ঞতা উন্নত হয় এবং সার্চ ইঞ্জিন র্যাংকিংও বাড়তে পারে।
এখানে কিছু সাধারণ ইমেজ অপটিমাইজেশন টেকনিক্যাল পদ্ধতি দেওয়া হলো:
- Compression: ইমেজের সাইজ কমানো।
- Resize: ইমেজের ডাইমেনশন কমানো।
- Format Conversion: ইমেজ ফরম্যাট যেমন JPEG, PNG, WebP ইত্যাদির মধ্যে পরিবর্তন করা।
- Lazy Loading: ইমেজ শুধুমাত্র যখন স্ক্রিনে আসবে, তখন লোড করা।
MeanJS এ Image Optimization এবং Displaying কিভাবে কাজ করে?
প্রথমে, আপনি ইমেজ আপলোড, অপটিমাইজ এবং তারপর ডিসপ্লে করার জন্য কিছু স্টেপ ফলো করবেন।
১. Image Uploading in MeanJS (Node.js + Express.js)
ইমেজ আপলোডের জন্য multer প্যাকেজ ব্যবহার করা হয়। এটি একটি Node.js মডিউল যা ফাইল আপলোডের জন্য ব্যবহৃত হয়।
multer ইনস্টল করা
npm install multer --save
Image Uploading API তৈরি করা (Express.js)
এখন, multer ব্যবহার করে ইমেজ আপলোডের API তৈরি করবো।
// server/routes/image.routes.js
const express = require('express');
const multer = require('multer');
const path = require('path');
const router = express.Router();
// Multer স্টোরেজ কনফিগারেশন
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, 'uploads/'); // ফোল্ডারে ইমেজ আপলোড করা হবে
},
filename: (req, file, cb) => {
cb(null, Date.now() + path.extname(file.originalname)); // ইউনিক নাম দিয়ে ফাইল সংরক্ষণ
}
});
// Multer মিডলওয়্যার তৈরি
const upload = multer({ storage: storage });
// POST রাউট: ইমেজ আপলোড করা
router.post('/upload', upload.single('image'), (req, res) => {
if (!req.file) {
return res.status(400).send({ message: 'No file uploaded.' });
}
res.status(200).send({ message: 'Image uploaded successfully', filePath: req.file.path });
});
module.exports = router;
এখানে, multer মডিউল ব্যবহার করে আপলোড করা ইমেজটি uploads/ ফোল্ডারে সংরক্ষণ করা হচ্ছে এবং সেই ফাইলের পথ (path) রিটার্ন করা হচ্ছে।
২. Image Optimization (Node.js)
ইমেজ অপটিমাইজেশনের জন্য sharp প্যাকেজ ব্যবহার করা হয়। এটি ইমেজ কমপ্রেশন এবং রিসাইজের জন্য খুবই জনপ্রিয়।
sharp ইনস্টল করা
npm install sharp --save
Image Optimization (Sharp) API তৈরি করা
ইমেজ আপলোড করার পর, আমরা সেই ইমেজটি অপটিমাইজ করব sharp এর মাধ্যমে।
// server/routes/image.routes.js
const sharp = require('sharp');
// Image Optimization ফাংশন
router.post('/optimize', upload.single('image'), (req, res) => {
if (!req.file) {
return res.status(400).send({ message: 'No file uploaded.' });
}
// ইমেজ অপটিমাইজেশন
const optimizedPath = 'uploads/optimized-' + req.file.filename;
sharp(req.file.path)
.resize(800, 800) // ইমেজের আকার রিসাইজ করা
.jpeg({ quality: 80 }) // JPEG ফরম্যাটে কমপ্রেশন করা
.toFile(optimizedPath, (err, info) => {
if (err) {
return res.status(500).send({ message: 'Error optimizing image.' });
}
res.status(200).send({ message: 'Image optimized successfully', filePath: optimizedPath });
});
});
এখানে, sharp ব্যবহার করে ইমেজের সাইজ 800x800 পিক্সেলে রিসাইজ করা হচ্ছে এবং JPEG ফরম্যাটে কোয়ালিটি 80% রেখে ইমেজ কমপ্রেশন করা হচ্ছে।
৩. Image Displaying in AngularJS
এখন, AngularJS ব্যবহার করে আপলোড এবং অপটিমাইজ করা ইমেজটি ডিসপ্লে করা হবে।
Image Displaying in AngularJS
// app.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
template: `
<div>
<h1>Upload and Display Image</h1>
<input type="file" (change)="onFileSelected($event)" />
<img *ngIf="imagePath" [src]="imagePath" alt="Uploaded Image" />
</div>
`
})
export class AppComponent {
imagePath: string;
constructor(private http: HttpClient) {}
// ফাইল সিলেক্ট হওয়ার পর ইমেজ আপলোড করা
onFileSelected(event) {
const file = event.target.files[0];
const formData = new FormData();
formData.append('image', file);
// ইমেজ আপলোড করা
this.http.post<{ message: string, filePath: string }>('http://localhost:3000/api/upload', formData)
.subscribe(response => {
console.log(response.message);
this.imagePath = `http://localhost:3000/${response.filePath}`; // ইমেজের path সেট করা
});
}
}
এখানে, AngularJS এর মাধ্যমে ফাইল সিলেক্ট করা হচ্ছে এবং HttpClient ব্যবহার করে সার্ভারে ফাইল পাঠানো হচ্ছে। তারপর, সাফল্যের সাথে ইমেজ আপলোড হলে, imagePath প্রপার্টি ব্যবহার করে ইমেজটি ডিসপ্লে করা হচ্ছে।
৪. Lazy Loading (Optional)
ইমেজ লোডিং স্পিড আরও দ্রুত করতে Lazy Loading ব্যবহার করা যেতে পারে, যেখানে ইমেজটি তখনই লোড হয় যখন এটি স্ক্রিনে ভিউ করা হয়।
AngularJS এ lazy loading করার জন্য:
<img [lazyLoad]="imagePath" alt="Image" />
এই ক্ষেত্রে, ইমেজটি তখনই লোড হবে যখন এটি ভিউপোর্টে আসবে। Angular বা JavaScript এর অন্যান্য লাইব্রেরি ব্যবহার করে lazy loading আরও কাস্টমাইজ করা যেতে পারে।
সারাংশ
MeanJS স্ট্যাক ব্যবহার করে ইমেজ অপটিমাইজেশন এবং ডিসপ্লে একটি কার্যকর প্রক্রিয়া। multer ব্যবহার করে ফাইল আপলোড, sharp ব্যবহার করে ইমেজ অপটিমাইজেশন এবং AngularJS ব্যবহার করে ইমেজ ডিসপ্লে করা হয়। ইমেজের সাইজ কমানোর জন্য রিসাইজ এবং কমপ্রেশন করা যেতে পারে, এবং লোডিং স্পিড উন্নত করার জন্য lazy loading ব্যবহার করা যেতে পারে।
Read more
