জাভাস্ক্রিপ্ট ব্যবহার করে কিভাবে ফাইল জিপ করবেন (.zip)

আধুনিক ওয়েব ডেভেলপমেন্টে, ফাইল কম্প্রেশন একটি সাধারণ প্রয়োজনীয়তা। ব্যবহারকারীরা হয়তো একাধিক ফাইল একটি কম্প্রেসড আর্কাইভে একত্রিত করে ডাউনলোড করতে চাইতে পারেন, অথবা ওয়েব অ্যাপ্লিকেশন থেকে ফাইল তৈরি করে .zip ফাইল হিসেবে এক্সপোর্ট করতে চাইতে পারেন। এই ব্লগ পোস্টে আমরা আপনাকে বিস্তারিতভাবে দেখাবো কিভাবে ব্রাউজারে জাভাস্ক্রিপ্ট ব্যবহার করে ফাইল প্যাকেজিং এবং কম্প্রেশন করা যায়। আমরা জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি JSZip ব্যবহার করে এই কাজ সম্পন্ন করব এবং FileSaver.js ব্যবহার করে ফাইল ডাউনলোড বাস্তবায়ন করব।

ব্যবহারের প্রস্তুতি

প্রথমে, আমাদের দুটি সাধারণ লাইব্রেরি ইনস্টল করতে হবে:

1. JSZip: এটি একটি হালকা জাভাস্ক্রিপ্ট লাইব্রেরি, যা .zip ফাইল তৈরি এবং পরিচালনা করার জন্য ব্যবহৃত হয়।
2. FileSaver.js: এই লাইব্রেরিটি ক্রস-ব্রাউজার উপায়ে ব্রাউজার থেকে ফাইল ডাউনলোড করার সুবিধা দেয়।

আপনি প্রজেক্টে এই লাইব্রেরিগুলি নিম্নলিখিত উপায়ে ইনস্টল করতে পারেন:

npm install jszip file-saver

অথবা CDN ব্যবহার করে (HTML-এ ব্যবহার করে):

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/FileSaver.min.js"></script>

টুল ফাংশন র‍্যাপিং

এরপরে, আমরা একটি র‍্যাপড টুল ফাংশন লিখব, যা একাধিক ফাইল একটি .zip ফাইলে প্যাকেজ করতে এবং ডাউনলোড করতে ব্যবহার করা যাবে। ধরুন আমরা একগুচ্ছ ছবি প্যাকেজ করতে চাই, যা হতে পারে মূল ফাইল বা প্রসেস করা ফাইল।

সাধারণ downloadFilesAsZip ফাংশন

import JSZip from "jszip";
import { saveAs } from "file-saver";

/**
 * একাধিক ফাইল ডাউনলোড করে একটি Zip ফাইলে প্যাকেজ করুন
 * @param {Array} files - ফাইল অবজেক্টের অ্যারে, প্রতিটি ফাইল অবজেক্টে ফাইলের URL এবং ফাইলের নাম রয়েছে
 * @param {string} zipName - তৈরি করা Zip ফাইলের নাম, ডিফল্ট হল 'download.zip'
 */
export const downloadFilesAsZip = async (files, zipName = "download.zip") => {
  // একটি নতুন JSZip ইনস্ট্যান্স তৈরি করুন
  const zip = new JSZip();

  // প্রতিটি ফাইল প্রসেস করার জন্য ম্যাপ ব্যবহার করে একটি Promise অ্যারে তৈরি করুন
  const fetchPromises = files.map(async (file) => {
    try {
      // ফাইল রিসোর্স অনুরোধ করুন, এখানে ধরে নেওয়া হচ্ছে ফাইল URL দিয়ে প্রদান করা হয়েছে
      const response = await fetch(file.url); // ফাইল রিসোর্স পান
      const blob = await response.blob(); // প্রতিক্রিয়াকে Blob অবজেক্টে রূপান্তর করুন

      // ফাইলটি জিপ আর্কাইভে যোগ করুন, সরবরাহকৃত ফাইলের নাম ব্যবহার করে
      zip.file(file.name, blob);
    } catch (error) {
      console.error(`Failed to add file: ${file.name}`, error);
    }
  });

  // সমস্ত ফাইল ডাউনলোড এবং Zip-এ যোগ করার জন্য অপেক্ষা করুন
  await Promise.all(fetchPromises);

  // কম্প্রেসড আর্কাইভ কন্টেন্ট তৈরি করুন (blob টাইপ)
  const content = await zip.generateAsync({ type: "blob" });

  // FileSaver.js ব্যবহার করে কম্প্রেসড আর্কাইভ ডাউনলোড করুন
  saveAs(content, zipName);
};

কোড কমেন্টস ব্যাখ্যা

• JSZip ইনস্ট্যান্স তৈরি: const zip = new JSZip(); — একটি নতুন Zip ফাইল ইনস্ট্যান্স তৈরি করে, সমস্ত ফাইল এই ইনস্ট্যান্সে যোগ করা হবে।
• ফাইল ডাউনলোড এবং প্যাকেজিং: ফাইলের URL থেকে ফাইলের কন্টেন্ট পেতে fetch() ফাংশন ব্যবহার করে, তারপর এটিকে blob ফরম্যাটে রূপান্তর করে। এটি করা হয় কারণ JSZip blob ফরম্যাট ব্যবহার করে ফাইল পরিচালনা করে।
• .zip ফাইল তৈরি: zip.generateAsync({ type: "blob" }) এর মাধ্যমে সমস্ত zip অবজেক্টে যোগ করা ফাইলগুলিকে একটি .zip ফাইলে কম্প্রেস করা হয়, একটি blob অবজেক্ট ফেরত দেয়।
• ফাইল সংরক্ষণ: saveAs(content, zipName) ব্যবহার করে FileSaver.js দিয়ে ফাইল ডাউনলোড ট্রিগার করা হয়, যেখানে content হল তৈরি করা কম্প্রেসড আর্কাইভ, এবং zipName হল ডাউনলোড করা ফাইলের নাম।

কিভাবে এই টুল ফাংশন ব্যবহার করবেন

ধরুন আমাদের একগুচ্ছ ছবি URL আছে, এবং আমরা সেগুলিকে একটি .zip ফাইলে প্যাকেজ করে ডাউনলোড করতে চাই, নিচে downloadFilesAsZip ফাংশন কল করার একটি উদাহরণ দেওয়া হল:

// উদাহরণ ফাইল ডেটা: ফাইল URL এবং ফাইল নাম সহ
const files = [
  { url: "https://example.com/image1.jpg", name: "image1.jpg" },
  { url: "https://example.com/image2.jpg", name: "image2.jpg" },
  { url: "https://example.com/image3.jpg", name: "image3.jpg" },
];

// ফাংশন কল করে ফাইল ডাউনলোড করুন এবং zip ফাইলে প্যাকেজ করুন
downloadFilesAsZip(files, "images.zip");

এই উদাহরণে, আমরা ছবি URL এবং ফাইল নাম সহ একটি অবজেক্ট অ্যারে প্রদান করেছি। downloadFilesAsZip ফাংশন কল করার পরে, ব্রাউজার স্বয়ংক্রিয়ভাবে ডাউনলোড অপারেশন ট্রিগার করবে, এবং এই ছবিগুলিকে images.zip নামে একটি কম্প্রেসড ফাইলে প্যাকেজ করবে।

সাধারণ সমস্যা এবং সমাধান

1. ক্রস-ডোমেন সমস্যা যদি ফাইলগুলি বিভিন্ন ডোমেন থেকে আসে, তাহলে সার্ভারে সঠিক ক্রস-ওরিজিন (CORS) হেডার সেট করা আছে কিনা নিশ্চিত করুন। অন্যথায়, ব্রাউজার fetch() অনুরোধ ব্লক করবে, যার ফলে ফাইল ডাউনলোড করা যাবে না।
2. বড় ফাইল ডাউনলোড যদি ডাউনলোড করা ফাইল খুব বড় হয়, তাহলে ডাউনলোড প্রক্রিয়া অপ্টিমাইজ করতে হতে পারে, যেমন চাংক ডাউনলোড বা প্রগ্রেস বার দেখানো ইত্যাদি।
3. ব্রাউজার সমর্থন এই পদ্ধতি fetch() এবং FileSaver.js এর উপর নির্ভর করে, তাই এই API গুলি সমর্থন করে এমন আধুনিক ব্রাউজার প্রয়োজন। যদি পুরানো ব্রাউজার সমর্থন করতে হয়, তাহলে polyfill ব্যবহার করা বিবেচনা করতে পারেন।

অন্যান্য পদ্ধতি

JSZip এবং FileSaver.js ব্যবহার ছাড়াও, ব্রাউজারে ফাইল কম্প্রেশন এবং প্যাকেজিং বাস্তবায়ন করার আরও কয়েকটি সাধারণ পদ্ধতি রয়েছে:

1. Pako.js: Pako হল জাভাস্ক্রিপ্টের জন্য একটি zlib কম্প্রেশন লাইব্রেরি, যা gzip এবং deflate ফরম্যাট সমর্থন করে। এটি ছোট ফাইল কম্প্রেশনের জন্য উপযুক্ত এবং ব্যবহার করা সহজ।
2. Archiver.js: Archiver.js একটি ফিচার-রিচ লাইব্রেরি, যা .tar, .zip ইত্যাদি ফরম্যাটে কম্প্রেশন সমর্থন করে, ব্রাউজারে ফাইল কম্প্রেশন করতে পারে, এবং আরও বেশি নিয়ন্ত্রণ অপশন প্রদান করে।
3. zip.js: zip.js একটি স্ট্রিমিং ডিকম্প্রেশন এবং কম্প্রেশন সমর্থনকারী জাভাস্ক্রিপ্ট লাইব্রেরি, যা বড় ফাইল পরিচালনা করতে পারে এবং .zip ফাইলে কম্প্রেশন করার ফিচার প্রদান করে।
4. BrowserFS + zip-lib: BrowserFS হল ব্রাউজারে ফাইল সিস্টেম সিমুলেশন প্রদানকারী একটি লাইব্রেরি, zip-lib এর সাথে মিলে .zip ফাইল তৈরি এবং ডাউনলোড করতে পারে, ফাইল সিস্টেম সিমুলেশন প্রয়োজন এমন অ্যাপ্লিকেশনের জন্য উপযুক্ত।