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 এর মাধ্যমে ফাইলটি সার্ভারে পাঠানো হয়। এটি খুবই কার্যকরী এবং জনপ্রিয় পদ্ধতি যেটি ব্যবহারকারীদের ফাইল আপলোডের সুযোগ দেয়।
Read more
