Chapters of Frontend Dev থেকে Full-Stack Backend

Week 3 - Interview-এ সবচেয়ে বেশি জিজ্ঞেস করা TopicsChapter 18 of 282 min read

Englishবাংলা

File upload - multer, validation আর S3 presigned URL-এর ধারণা

Multipart request, size ও type validation, disk-এ না রেখে cloud storage, presigned URL

Menu-তে খাবারের ছবি লাগবে - মানে user ছবি upload করবে। Frontend-এর দিক থেকে এটা শুধু একটা input field, কিন্তু backend-এ এটা আলাদা জগৎ। সাধারণ JSON request দিয়ে ফাইল যায় না - ফাইল আসে multipart form-data আকারে, আর সেটা সামলাতে লাগে আলাদা ব্যবস্থা।

Multer - Express-এর ফাইল গ্রহণকারী

import multer from "multer";

const upload = multer({
  dest: "uploads/",
  limits: { fileSize: 2 * 1024 * 1024 }, // সর্বোচ্চ ২ MB
  fileFilter: (req, file, cb) => {
    if (!file.mimetype.startsWith("image/")) {
      return cb(new Error("শুধু ছবি upload করা যাবে"));
    }
    cb(null, true);
  },
});

app.post("/menu", upload.single("photo"), createMenuItem);

দুটো বাধা এখানে বাধ্যতামূলক: size limit আর type check। না হলে কেউ ২ GB-এর ফাইল তুলে server ভরিয়ে ফেলতে পারে, কিংবা ছবির নামে ক্ষতিকর ফাইল ঢুকিয়ে দিতে পারে। Type শুধু ফাইলের নামের শেষাংশ (extension) দেখে যাচাই করবেন না - ভেতরের আসল type (mimetype) দেখুন, আর সম্ভব হলে ফাইলটা সত্যিই ছবি কিনা পরীক্ষা করুন।

আসল project-এ ফাইল server-এ থাকে না

নিজের server-এর disk-এ ফাইল রাখা ছোট project-এ চলে, কিন্তু server বদলালে বা একাধিক server হলে ফাইল হারানোর ও মিলিয়ে রাখার ঝামেলা শুরু হয়। প্রচলিত সমাধান: ফাইল থাকে cloud storage-এ (যেমন S3), database-এ থাকে শুধু তার URL। আপলোডের আরও ভালো একটা ছক হলো presigned URL: server একটা অল্প মেয়াদের সই করা URL দেয়, browser সরাসরি storage-এ ফাইল তোলে - ভারী ফাইলটা আপনার server ছুঁয়েই যায় না। Server শুধু অনুমতি দেয়, বহন করে না।

আরেকটা নিয়ম: user-এর দেওয়া ফাইলের নাম যেভাবে এসেছে সেভাবেই সেভ করবেন না - একই নামে দুটো ফাইল এলে একটা আরেকটাকে মুছে ফেলবে, আর নামে অদ্ভুত অক্ষর থাকলে পথের গণ্ডগোল হতে পারে। নিজে থেকে অনন্য নাম বানিয়ে নিন (সময় + এলোমেলো অংশ), আসল নামটা দরকার হলে database-এ আলাদা করে রাখুন।

সবাই যে ভুলটা করে

File upload-এ কোনো size limit বা type check না রাখা - এটা শুধু bug না, সরাসরি নিরাপত্তা ছিদ্র। আরেকটা ভুল: upload করা ফাইল এমন folder-এ রাখা যেখান থেকে সেটা চালানো (execute) যায় - ছবির আড়ালে script উঠে গেলে server হাতে চলে যেতে পারে।

আজকের Practice

Menu item তৈরির endpoint-এ ছবি upload যোগ করুন multer দিয়ে - ২ MB limit আর শুধু ছবির type বাধ্যতামূলক করে। বড় ফাইল আর PDF তুলে দিয়ে দেখুন দুটোই ঠিকভাবে আটকাচ্ছে কিনা।

Interview-এ কীভাবে বলবেন

File upload-এ আমি multer ব্যবহার করি কড়া size limit আর type validation সহ, ফাইলের নাম নিজে থেকে নতুন করে বানাই। Production-এ ফাইল server-এর disk-এ রাখি না - cloud storage-এ রাখি, আর বড় ফাইলের ক্ষেত্রে presigned URL দিয়ে client সরাসরি storage-এ তোলে, server শুধু অনুমতি আর URL-টা সামলায়।

All chapters of Frontend Dev থেকে Full-Stack Backend