نحوه باز کردن دایرکتوری

توماس اشتاینر

سروکار داشتن با دایرکتوری ها چیزی نیست که شما به صورت روزانه با آن کنار بیایید، اما گهگاه مواردی مانند پردازش همه تصاویر در یک دایرکتوری پیش می آید. با استفاده از File System Access API، کاربران اکنون می توانند دایرکتوری ها را در مرورگر باز کنند و تصمیم بگیرند که آیا به دسترسی نوشتن نیاز دارند یا خیر.

روش مدرن

با استفاده از متد showDirectoryPicker() API دسترسی به فایل سیستم

برای باز کردن دایرکتوری، showDirectoryPicker() را فراخوانی کنید، که یک وعده را با دایرکتوری انتخاب شده برمی گرداند. اگر به دسترسی نوشتن نیاز دارید، می‌توانید { mode: 'readwrite' } به متد ارسال کنید.

پشتیبانی مرورگر

  • 86
  • 86
  • ایکس
  • ایکس

منبع

روش کلاسیک

با استفاده از عنصر <input type="file" webkitdirectory>

عنصر <input type="file" webkitdirectory> در یک صفحه به کاربر اجازه می دهد روی آن کلیک کرده و یک فهرست را باز کند. ترفند اکنون شامل وارد کردن عنصر به صورت نامرئی در یک صفحه با جاوا اسکریپت و کلیک بر روی آن به صورت برنامه‌نویسی است.

پشتیبانی مرورگر

  • 7
  • 13
  • 50
  • 11.1

منبع

افزایش پیشرونده

روش زیر از File System Access API زمانی که پشتیبانی می شود استفاده می کند و در غیر این صورت به رویکرد کلاسیک باز می گردد. در هر دو مورد، تابع یک دایرکتوری را برمی‌گرداند، اما در مواردی که از File System Access API پشتیبانی می‌شود، هر شیء فایل همچنین دارای یک FileSystemDirectoryHandle در ویژگی directoryHandle و یک FileSystemFileHandle ذخیره شده در ویژگی handle است، بنابراین می‌توانید به صورت اختیاری دسته‌ها را سریال‌سازی کنید. به دیسک

const openDirectory = async (mode = "read") => {
  // Feature detection. The API needs to be supported
  // and the app not run in an iframe.
  const supportsFileSystemAccess =
    "showDirectoryPicker" in window &&
    (() => {
      try {
        return window.self === window.top;
      } catch {
        return false;
      }
    })();
  // If the File System Access API is supported…
  if (supportsFileSystemAccess) {
    let directoryStructure = undefined;

    // Recursive function that walks the directory structure.
    const getFiles = async (dirHandle, path = dirHandle.name) => {
      const dirs = [];
      const files = [];
      for await (const entry of dirHandle.values()) {
        const nestedPath = `${path}/${entry.name}`;
        if (entry.kind === "file") {
          files.push(
            entry.getFile().then((file) => {
              file.directoryHandle = dirHandle;
              file.handle = entry;
              return Object.defineProperty(file, "webkitRelativePath", {
                configurable: true,
                enumerable: true,
                get: () => nestedPath,
              });
            })
          );
        } else if (entry.kind === "directory") {
          dirs.push(getFiles(entry, nestedPath));
        }
      }
      return [
        ...(await Promise.all(dirs)).flat(),
        ...(await Promise.all(files)),
      ];
    };

    try {
      // Open the directory.
      const handle = await showDirectoryPicker({
        mode,
      });
      // Get the directory structure.
      directoryStructure = getFiles(handle, undefined);
    } catch (err) {
      if (err.name !== "AbortError") {
        console.error(err.name, err.message);
      }
    }
    return directoryStructure;
  }
  // Fallback if the File System Access API is not supported.
  return new Promise((resolve) => {
    const input = document.createElement('input');
    input.type = 'file';
    input.webkitdirectory = true;

    input.addEventListener('change', () => {
      let files = Array.from(input.files);
      resolve(files);
    });
    if ('showPicker' in HTMLInputElement.prototype) {
      input.showPicker();
    } else {
      input.click();
    }
  });
};

بیشتر خواندن

نسخه ی نمایشی

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📂</text></svg>"
    />
    <title>How to open a directory</title>
  </head>
  <body>
    <h1>How to open a directory</h1>
    <button type="button">Open directory</button>
    <pre></pre>
  </body>
</html>

CSS


        :root {
  color-scheme: dark light;
}

html {
  box-sizing: border-box;
}

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

body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}

JS


        const button = document.querySelector('button');
const pre = document.querySelector('pre');

const openDirectory = async (mode = "read") => {
  // Feature detection. The API needs to be supported
  // and the app not run in an iframe.
  const supportsFileSystemAccess =
    "showDirectoryPicker" in window &&
    (() => {
      try {
        return window.self === window.top;
      } catch {
        return false;
      }
    })();
  // If the File System Access API is supported…
  if (supportsFileSystemAccess) {
    let directoryStructure = undefined;

    const getFiles = async (dirHandle, path = dirHandle.name) => {
      const dirs = [];
      const files = [];
      for await (const entry of dirHandle.values()) {
        const nestedPath = `${path}/${entry.name}`;
        if (entry.kind === "file") {
          files.push(
            entry.getFile().then((file) => {
              file.directoryHandle = dirHandle;
              file.handle = entry;
              return Object.defineProperty(file, "webkitRelativePath", {
                configurable: true,
                enumerable: true,
                get: () => nestedPath,
              });
            })
          );
        } else if (entry.kind === "directory") {
          dirs.push(getFiles(entry, nestedPath));
        }
      }
      return [
        ...(await Promise.all(dirs)).flat(),
        ...(await Promise.all(files)),
      ];
    };

    try {
      const handle = await showDirectoryPicker({
        mode,
      });
      directoryStructure = getFiles(handle, undefined);
    } catch (err) {
      if (err.name !== "AbortError") {
        console.error(err.name, err.message);
      }
    }
    return directoryStructure;
  }
  // Fallback if the File System Access API is not supported.
  return new Promise((resolve) => {
    const input = document.createElement('input');
    input.type = 'file';
    input.webkitdirectory = true;

    input.addEventListener('change', () => {
      let files = Array.from(input.files);
      resolve(files);
    });
    if ('showPicker' in HTMLInputElement.prototype) {
      input.showPicker();
    } else {
      input.click();
    }
  });
};

button.addEventListener('click', async () => {
  const filesInDirectory = await openDirectory();
  if (!filesInDirectory) {
    return;
  }
  Array.from(filesInDirectory).forEach((file) => (pre.textContent += `${file.name}\n`));
});