জাভাস্ক্রিপ্ট WebAPI File.type প্রপার্টি: ফাইল টাইপ (MIME) জানা

File.type — আপলোড করা ফাইলের MIME টাইপ জানুন

File অবজেক্টের type প্রপার্টি ফাইলের MIME টাইপ (যেমন image/png, application/pdf) রিটার্ন করে। এটি ক্লায়েন্ট-সাইড ফাইল ভ্যালিডেশনের প্রথম লাইন।

সিনট্যাক্স

const mimeType = file.type; // স্ট্রিং বা খালি স্ট্রিং ('')

পূর্ণ উদাহরণ: ফাইল সিলেক্ট করলে টাইপ দেখানো

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File.type উদাহরণ</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', sans-serif; padding: 20px; max-width: 600px; margin: 0 auto; }
    .result { margin-top: 20px; padding: 16px; background: #f8fafc; border-radius: 8px; font-family: monospace; white-space: pre-wrap; }
    .badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 14px; font-weight: 600; margin-right: 8px; }
    .badge-image { background: #dcfce7; color: #166534; }
    .badge-video { background: #dbeafe; color: #1e40af; }
    .badge-audio { background: #fef3c7; color: #92400e; }
    .badge-doc { background: #e0e7ff; color: #3730a3; }
    .badge-other { background: #f1f5f9; color: #475569; }
    .badge-unknown { background: #fee2e2; color: #991b1b; }
  </style>
</head>
<body>
  <h1>📁 ফাইল টাইপ ডিটেক্টর</h1>
  <input type="file" id="fileInput" multiple>
  <div class="result" id="result">ফাইল সিলেক্ট করুন...</div>
  
  <script>
    const input = document.getElementById('fileInput');
    const result = document.getElementById('result');
    
    input.addEventListener('change', (e) => {
      const files = e.target.files;
      if (!files.length) {
        result.textContent = 'কোনো ফাইল সিলেক্ট করা হয়নি।';
        return;
      }
      
      let output = '';
      for (const file of files) {
        const type = file.type || 'UNKNOWN';
        const badgeClass = getBadgeClass(type);
        output += `${file.name}\n`;
        output += `  Size: ${formatBytes(file.size)}\n`;
        output += `  Type: ${type}\n`;
        output += `  Last Modified: ${new Date(file.lastModified).toLocaleString()}\n\n`;
      }
      result.innerHTML = output;
    });
    
    function getBadgeClass(type) {
      if (!type) return 'badge-unknown';
      if (type.startsWith('image/')) return 'badge-image';
      if (type.startsWith('video/')) return 'badge-video';
      if (type.startsWith('audio/')) return 'badge-audio';
      if (type.startsWith('application/') || type.startsWith('text/')) return 'badge-doc';
      return 'badge-other';
    }
    
    function formatBytes(bytes) {
      if (bytes === 0) return '0 Bytes';
      const k = 1024;
      const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
  </script>
</body>
</html>

সাধারণ MIME টাইপ উদাহরণ

গুরুত্বপূর্ণ সীমাবদ্ধতা

• ক্লায়েন্ট-সাইড ডেটা: `file.type` ব্রাউজার ফাইলের এক্সটেনশন/ম্যাজিক বাইট देखकर অনুমান করে — **এটি ফেক করা যায়**। সার্ভার-সাইডে অবশ্যই যাচাই করুন।
• খালি স্ট্রিং: অজানা ফাইল টাইপের জন্য '' রিটার্ন করতে পারে।
• কেস-ইনসেনসিটিভ: مقایসা করার সময় .toLowerCase() ব্যবহার করুন।

ভ্যালিডেশন উদাহরণ (ক্লায়েন্ট-সাইড)

const ALLOWED_TYPES = [
  'image/jpeg', 'image/png', 'image/webp', 'image/gif',
  'application/pdf'
];
const MAX_SIZE = 5 * 1024 * 1024; // 5MB

input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;
  
  const errors = [];
  if (!ALLOWED_TYPES.includes(file.type.toLowerCase())) {
    errors.push(`অনুমোদিত ফাইল টাইপ নয়: ${file.type || 'unknown'}`);
  }
  if (file.size > MAX_SIZE) {
    errors.push(`ফাইল খুব বড়: ${formatBytes(file.size)} (ম্যাক্স 5MB)`);
  }
  
  if (errors.length) {
    alert(errors.join('\n'));
    e.target.value = ''; // ইনপুট ক্লিয়ার
  } else {
    console.log('ফাইল ভ্যালিড:', file.name, file.type);
  }
});

File.type vs File.name এক্সটেনশন

// ভুল: এক্সটেনশন চেক করে টাইপ অনুমান
const isImage = file.name.endsWith('.png'); // খারাপ — এক্সটেনশন রিনেম করা যায়

// সঠিক: MIME টাইপ চেক
const isImage = file.type.startsWith('image/'); // ভালো — কিন্তু সার্ভারেও যাচাই করুন

নিচের লাইন: `File.type` দ্রুত ক্লায়েন্ট-সাইড ফিডব্যাকের জন্য খুব ভালো, কিন্তু **সার্ভার-সাইড ভ্যালিডেশন (magic bytes, MIME চেক) অবশ্যক**।