APIهای Blob و File

آموزش جاوااسکریپت

مقدمه

در درس قبل دیدیم که چگونه می‌توان رشته‌ها را به داده‌های باینری (Uint8Array) تبدیل کرد. اما در وب، ما اغلب با داده‌هایی سروکار داریم که ماهیت «فایل-مانند» دارند، مانند تصاویر، ویدئوها یا فایل‌های فشرده. Blob و File دو رابط برنامه‌نویسی مرتبط هستند که به ما اجازه می‌دهند این نوع داده‌های باینری را در جاوااسکریپت نمایش داده و مدیریت کنیم. این APIها برای کار با فایل‌های آپلود شده توسط کاربر، ساخت فایل برای دانلود، یا مدیریت داده‌های باینری حجیم ضروری هستند.

شیء Blob

یک Blob (مخفف Binary Large Object) یک شیء است که یک قطعه داده باینری خام و غیرقابل تغییر را نمایندگی می‌کند. این داده لزوماً در فرمت بومی جاوااسکریپت نیست. Blobها می‌توانند داده‌های بسیار بزرگی را در خود جای دهند و برای این کار بهینه شده‌اند.

برای ساخت یک Blob از سازنده‌ی آن استفاده می‌کنیم: new Blob(parts, options).

  • parts: یک آرایه از داده‌ها که Blob را تشکیل می‌دهند. اعضای این آرایه می‌توانند رشته، ArrayBuffer، TypedArra یا حتی Blobهای دیگر باشند.
  • options: یک شیء پیکربندی که مهم‌ترین پراپرتی آن type است. این پراپرتی نوع MIME داده (مثلاً 'text/plain' یا 'image/png') را مشخص می‌کند.
Copy Icon JAVASCRIPT 
const htmlContent = '<h1>Hello, Blob!</h1>';
const myBlob = new Blob([htmlContent], { type: 'text/html' });

console.log(myBlob);
console.log('Blob size:', myBlob.size, 'bytes');
console.log('Blob type:', myBlob.type);

در کد بالا، ما یک Blob از یک رشته HTML ساخته‌ایم و نوع MIME آن را نیز مشخص کرده‌ایم. پراپرتی‌های size و type به ترتیب اندازه Blob به بایت و نوع آن را نشان می‌دهند.

شیء File

رابط File از Blob ارث‌بری می‌کند و تمام قابلیت‌های آن را دارد، با این تفاوت که اطلاعات بیشتری مربوط به فایل سیستم، مانند نام فایل و تاریخ آخرین تغییر، را نیز در خود جای می‌دهد. یک File در واقع یک Blob با متادیتا است.

رایج‌ترین راه برای به دست آوردن یک شیء File، از طریق انتخاب فایل توسط کاربر با استفاده از یک عنصر <input type="file"> است. پراپرتی files این عنصر یک FileList است که حاوی اشیاء File انتخاب شده توسط کاربر می‌باشد.

Copy Icon JAVASCRIPT 
<!-- HTML: <input type="file" id="file-picker"> -->
const fileInput = document.getElementById('file-picker');

fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    if (file) {
        console.log('File Name:', file.name);
        console.log('File Size:', file.size);
        console.log('MIME Type:', file.type);
        console.log('Last Modified:', new Date(file.lastModified));
    }
});

این کد یک شنونده رویداد به فیلد آپلود فایل اضافه می‌کند. به محض اینکه کاربر فایلی را انتخاب کند، اطلاعات آن فایل از طریق شیء File در دسترس قرار گرفته و در کنسول نمایش داده می‌شود.

استفاده از Blob و File با Object URL

خب، حالا که یک شیء Blob یا File در حافظه داریم، چگونه می‌توانیم از آن استفاده کنیم؟ مثلاً چطور یک تصویر انتخاب شده توسط کاربر را نمایش دهیم یا یک فایل ساخته شده در جاوااسکریپت را برای دانلود ارائه دهیم؟ پاسخ در Object URLها نهفته است.

یک Object URL یک URL موقت و منحصر به فرد است که در مرورگر ساخته می‌شود و مستقیماً به داده‌های موجود در یک شیء Blob یا File در حافظه اشاره می‌کند. برای ساخت آن از متد URL.createObjectURL() استفاده می‌کنیم. این متد شیء Blob یا File را گرفته و یک رشته URL (که با blob: شروع می‌شود) برمی‌گرداند.

Object URLها تا زمانی که سند بسته شود یا به صراحت با URL.revokeObjectURL() آزاد نشوند، حافظه را اشغال می‌کنند. برای جلوگیری از نشت حافظه (memory leaks)، بهتر است پس از اتمام کار با URL، آن را آزاد کنید.

Copy Icon JAVASCRIPT 
const textBlob = new Blob(['This is some file content.'], { type: 'text/plain' });
const downloadLink = document.getElementById('download');

// Create an object URL for the blob
const objectUrl = URL.createObjectURL(textBlob);

// Set the link's href to the object URL
downloadLink.href = objectUrl;
// The 'download' attribute suggests a filename to the browser
downloadLink.download = 'my-generated-file.txt';

در این مثال، ما یک Blob متنی ساخته، برای آن یک Object URL ایجاد کرده و آن را به اتریبیوت href یک تگ <a> اختصاص می‌دهیم. اتریبیوت download به مرورگر می‌گوید که به جای رفتن به این آدرس، محتوای آن را با نام پیشنهادی دانلود کند.

در این درس یاد گرفتیم که چگونه داده‌های باینری و فایل‌ها را در قالب اشیاء Blob و File در جاوااسکریپت نمایش دهیم و از آنها استفاده کنیم. همچنین دیدیم که چگونه با URL.createObjectURL() می‌توانیم از این اشیاء در DOM برای نمایش یا دانلود محتوا بهره ببریم. این مهارت برای کار با فایل‌های آپلودی و تولید داده در سمت کاربر ضروری است. در درس بعدی، با دو API دیگر که با نمایش و محیط کاربر سروکار دارند، یعنی `APIهای Fullscreen و Geolocation` آشنا خواهیم شد.