Express.js ও Multer ব্যবহার করে একাধিক ইমেজ আপলোড করা
এই টিউটোরিয়ালে আমরা দেখব কিভাবে Express.js এবং Multer ব্যবহার করে একাধিক ইমেজ ফাইল আপলোড করা যায়। আমরা একটি ফর্ম তৈরি করব যেখানে একাধিক ইমেজ ফাইল আপলোড করা যাবে এবং সাথে দুইটি বডি প্যারামিটার name এবং email গ্রহণ করব।
ধাপ ১: প্রয়োজনীয় প্যাকেজ ইনস্টল করা
প্রথমে আমাদের express এবং multer প্যাকেজগুলো ইনস্টল করতে হবে। টার্মিনালে নিচের কমান্ডটি চালান:
npm install express multerধাপ ২: ফাইল আপলোড করার জন্য সার্ভার তৈরি করা
const express = require('express'); // Express.js মডিউল ইম্পোর্ট করা
const multer = require('multer'); // Multer মডিউল ইম্পোর্ট করা
const path = require('path'); // Path মডিউল ইম্পোর্ট করা
const app = express(); // একটি Express অ্যাপ তৈরি করা
const port = 3000; // সার্ভার চলার পোর্ট নাম্বার
// ফাইলের নাম জেনারেট করার ফাংশন
const generateFilename = (originalFilename) => {
// মূল ফাইলের নাম থেকে স্পেস সরিয়ে নতুন ফাইলের নাম তৈরি করা
let newFilename = originalFilename.replace(/\s+/g, '_');
// নতুন ফাইলের নামে বর্তমান তারিখ যোগ করা
const currentDate = new Date();
const dateString = currentDate.toISOString().split('T')[0];
newFilename = dateString + '_' + newFilename;
return newFilename;
};
// Multer স্টোরেজ কনফিগারেশন
const storage = multer.diskStorage({
// ফাইল গুলো কোথায় সংরক্ষণ করা হবে তা নির্ধারণ
destination: './uploads',
// ফাইলের নাম কিভাবে তৈরি হবে তা নির্ধারণ
filename: (req, file, cb) => {
cb(null, generateFilename(file.originalname)); // নতুন ফাইল নাম জেনারেট করা
}
});
// Multer ইনস্ট্যান্স তৈরি করা
const upload = multer({
storage: storage,
});
// বডি প্যারামিটার পার্স করার জন্য Express মিডলওয়্যার
app.use(express.urlencoded({ extended: true })); // ফর্ম ডেটা পার্স করা
// ফাইল আপলোড এবং বডি প্যারামিটার গ্রহণের জন্য রুট
app.post('/upload', upload.array('images', 5), (req, res) => {
// বডি প্যারামিটার থেকে name এবং email গ্রহণ করা
const name = req.body.name;
const email = req.body.email;
// আপলোড করা ফাইলের তালিকা
const files = req.files;
// প্রতিক্রিয়া পাঠানো
res.send(`Files uploaded successfully! Name: ${name}, Email: ${email}, Files: ${files.map(file => file.filename).join(', ')}`);
});
// সার্ভার শুরু করা
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
ধাপ ৩: HTML ফর্ম তৈরি করা
public ডিরেক্টরিতে একটি index.html ফাইল তৈরি করুন এবং নিচের 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>
<h1>Upload Multiple Files</h1>
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="name">Name:</label>
<input type="text" name="name" id="name" required>
<br>
<label for="email">Email:</label>
<input type="email" name="email" id="email" required>
<br>
<label for="images">Upload Images:</label>
<input type="file" name="images" id="images" multiple required>
<br>
<button type="submit">Upload</button>
</form>
</body>
</html>