কিভাবে ডাইরেক্টরি টেনে আনতে হয়

টমাস স্টেইনার

এইচটিএমএল ড্র্যাগ এবং ড্রপ ইন্টারফেসগুলি ওয়েব অ্যাপ্লিকেশনগুলিকে একটি ওয়েব পৃষ্ঠায় টেনে আনা এবং ড্রপ করা ফাইলগুলি গ্রহণ করতে সক্ষম করে৷ একটি ড্র্যাগ এবং ড্রপ অপারেশন চলাকালীন, টেনে আনা ফাইল এবং ডিরেক্টরি আইটেমগুলি যথাক্রমে ফাইল এন্ট্রি এবং ডিরেক্টরি এন্ট্রিগুলির সাথে যুক্ত থাকে। যখন ব্রাউজারে ফাইলগুলি টেনে আনা এবং ড্রপ করার কথা আসে, তখন এটি করার দুটি উপায় রয়েছে: আধুনিক এবং ক্লাসিক উপায়৷

আধুনিক উপায়

ফাইল সিস্টেম অ্যাক্সেস API এর DataTransferItem.getAsFileSystemHandle() পদ্ধতি ব্যবহার করে

DataTransferItem.getAsFileSystemHandle() পদ্ধতি একটি FileSystemFileHandle অবজেক্টের সাথে একটি প্রতিশ্রুতি প্রদান করে যদি টেনে আনা আইটেমটি একটি ফাইল হয়, এবং একটি FileSystemDirectoryHandle অবজেক্টের সাথে একটি প্রতিশ্রুতি যদি টেনে আনা আইটেমটি একটি ডিরেক্টরি হয়। এই হ্যান্ডেলগুলি আপনাকে পড়তে দেয় এবং ঐচ্ছিকভাবে ফাইল বা ডিরেক্টরিতে আবার লিখতে দেয়। মনে রাখবেন যে টেনে আনুন এবং ড্রপ ইন্টারফেসের DataTransferItem.kind ফাইল এবং ডিরেক্টরি উভয়ের জন্যই "file" হবে, যেখানে ফাইল সিস্টেম অ্যাক্সেস API এর FileSystemHandle.kind হবে ফাইলগুলির জন্য "file" এবং ডিরেক্টরিগুলির জন্য "directory" ।

ব্রাউজার সমর্থন

  • 86
  • 86
  • এক্স
  • এক্স

উৎস

ক্লাসিক উপায়

অ-মানক DataTransferItem.webkitGetAsEntry() পদ্ধতি ব্যবহার করে

DataTransferItem.webkitGetAsEntry() পদ্ধতিটি ড্র্যাগ ডেটা আইটেমের FileSystemFileEntry প্রদান করে যদি আইটেমটি একটি ফাইল হয় এবং যদি আইটেমটি একটি ডিরেক্টরি হয় তাহলে FileSystemDirectoryEntry । আপনি যখন ফাইল বা ডিরেক্টরি পড়তে পারেন, তখন তাদের কাছে আবার লেখার কোন উপায় নেই। এই পদ্ধতির অসুবিধা রয়েছে যা স্ট্যান্ডার্ড ট্র্যাকে নেই, তবে সুবিধা রয়েছে যে এটি ডিরেক্টরিগুলিকে সমর্থন করে।

ব্রাউজার সমর্থন

  • 13
  • 14
  • 50
  • 11.1

উৎস

প্রগতিশীল বর্ধিতকরণ

নীচের স্নিপেটটি আধুনিক ফাইল সিস্টেম অ্যাক্সেস API-এর DataTransferItem.getAsFileSystemHandle() পদ্ধতি ব্যবহার করে যখন এটি সমর্থিত হয়, তারপর অ-মানক DataTransferItem.webkitGetAsEntry() পদ্ধতিতে ফিরে আসে এবং অবশেষে ক্লাসিক DataTransferItem.getAsFile() পদ্ধতিতে ফিরে আসে। প্রতিটি handle ধরন পরীক্ষা করতে ভুলবেন না, কারণ এটি যেকোনো একটি হতে পারে:

  • যখন আধুনিক কোড পাথ বেছে নেওয়া হয় তখন FileSystemDirectoryHandle ।
  • FileSystemDirectoryEntry যখন অ-মানক কোড পাথ বেছে নেওয়া হয়।

সমস্ত প্রকারের একটি name সম্পত্তি আছে, তাই এটি লগ করা ভাল এবং সর্বদা কাজ করবে।

// Run feature detection.
const supportsFileSystemAccessAPI =
  'getAsFileSystemHandle' in DataTransferItem.prototype;
const supportsWebkitGetAsEntry =
  'webkitGetAsEntry' in DataTransferItem.prototype;

// This is the drag and drop zone.
const elem = document.querySelector('main');

// Prevent navigation.
elem.addEventListener('dragover', (e) => {
  e.preventDefault();
});

// Visually highlight the drop zone.
elem.addEventListener('dragenter', (e) => {
  elem.style.outline = 'solid red 1px';
});

// Visually unhighlight the drop zone.
elem.addEventListener('dragleave', (e) => {
  elem.style.outline = '';
});

// This is where the drop is handled.
elem.addEventListener('drop', async (e) => {
  // Prevent navigation.
  e.preventDefault();
  if (!supportsFileSystemAccessAPI && !supportsWebkitGetAsEntry) {
    // Cannot handle directories.
    return;
  }
  // Unhighlight the drop zone.
  elem.style.outline = '';

  // Prepare an array of promises…
  const fileHandlesPromises = [...e.dataTransfer.items]
    // …by including only files (where file misleadingly means actual file _or_
    // directory)…
    .filter((item) => item.kind === 'file')
    // …and, depending on previous feature detection…
    .map((item) =>
      supportsFileSystemAccessAPI
        // …either get a modern `FileSystemHandle`…
        ? item.getAsFileSystemHandle()
        // …or a classic `FileSystemFileEntry`.
        : item.webkitGetAsEntry(),
    );
  // Loop over the array of promises.
  for await (const handle of fileHandlesPromises) {
    // This is where we can actually exclusively act on the directories.
    if (handle.kind === 'directory' || handle.isDirectory) {
      console.log(`Directory: ${handle.name}`);
    }
  }
});

আরও পড়া

ডেমো

এইচটিএমএল

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>How to drag and drop directories</title>
  </head>
  <body>
    <main>
      <h1>How to drag and drop directories</h1>
      <p>Drag and drop one or multiple files or directories onto the page.</p>
      <pre></pre>
    </main>
  </body>
</html>

সিএসএস


        :root {
  color-scheme: dark light;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 1rem;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img,
video {
  height: auto;
  max-width: 100%;
}

main {
  flex-grow: 1;
}

footer {
  margin-top: 1rem;
  border-top: solid CanvasText 1px;
  font-size: 0.8rem;
}

জেএস


        const supportsFileSystemAccessAPI =
  "getAsFileSystemHandle" in DataTransferItem.prototype;
const supportsWebkitGetAsEntry =
  "webkitGetAsEntry" in DataTransferItem.prototype;

const elem = document.querySelector("main");
const debug = document.querySelector("pre");

elem.addEventListener("dragover", (e) => {
  // Prevent navigation.
  e.preventDefault();
});

elem.addEventListener("dragenter", (e) => {
  elem.style.outline = "solid red 1px";
});

elem.addEventListener("dragleave", (e) => {
  elem.style.outline = "";
});

elem.addEventListener("drop", async (e) => {
  e.preventDefault();
  elem.style.outline = "";
  const fileHandlesPromises = [...e.dataTransfer.items]
    .filter((item) => item.kind === "file")
    .map((item) =>
      supportsFileSystemAccessAPI
        ? item.getAsFileSystemHandle()
        : supportsWebkitGetAsEntry
        ? item.webkitGetAsEntry()
        : item.getAsFile()
    );

  for await (const handle of fileHandlesPromises) {
    if (handle.kind === "directory" || handle.isDirectory) {
      console.log(`Directory: ${handle.name}`);
      debug.textContent += `Directory: ${handle.name}\n`;
    } else {
      console.log(`File: ${handle.name}`);
      debug.textContent += `File: ${handle.name}\n`;
    }
  }
});