Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

डायरेक्ट्री खोलने का तरीका

Thomas Steiner

डायरेक्ट्री के साथ काम करना, रोज़ाना की ज़रूरत नहीं है. हालांकि, कभी-कभी इसकी ज़रूरत पड़ सकती है. जैसे, किसी डायरेक्ट्री में मौजूद सभी इमेज को प्रोसेस करना. File System Access API की मदद से, अब उपयोगकर्ता ब्राउज़र में डायरेक्ट्री खोल सकते हैं. साथ ही, यह तय कर सकते हैं कि उन्हें डायरेक्ट्री में बदलाव करने का ऐक्सेस चाहिए या नहीं.

मॉडर्न तरीका

File System Access API के `showDirectoryPicker()` तरीके का इस्तेमाल करना

किसी डायरेक्ट्री को खोलने के लिए, showDirectoryPicker() को कॉल करें, इससे चुनी गई डायरेक्ट्री के साथ प्रॉमिस मिलता है. अगर आपको डायरेक्ट्री में बदलाव करने का ऐक्सेस चाहिए, तो इस तरीके में { mode: 'readwrite' } पास करें.

Browser Support

Source

क्लासिक तरीका

`<input type="file" webkitdirectory>` एलिमेंट का इस्तेमाल करना

किसी पेज पर मौजूद <input type="file" webkitdirectory> एलिमेंट, उपयोगकर्ता को इस पर क्लिक करके डायरेक्ट्री खोलने की सुविधा देता है. अब JavaScript की मदद से, इस एलिमेंट को किसी पेज में छिपाकर जोड़ा जाता है और प्रोग्राम के ज़रिए इस पर क्लिक किया जाता है.

Browser Support

Source

परतदार वृद्धि

नीचे दिया गया तरीका, File System Access API का इस्तेमाल तब करता है, जब यह काम करता है. इसके अलावा, यह क्लासिक तरीके पर वापस चला जाता है. दोनों ही मामलों में, फ़ंक्शन एक डायरेक्ट्री दिखाता है. हालांकि, File System Access API के काम करने पर, हर फ़ाइल ऑब्जेक्ट में directoryHandle प्रॉपर्टी में सेव किया गया FileSystemDirectoryHandle और handle प्रॉपर्टी में सेव किया गया FileSystemFileHandle भी होता है. इसलिए, आपके पास हैंडल को डिस्क पर क्रम से सेव करने का विकल्प होता है.

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();
    }
  });
};

इस बारे में और पढ़ें

File System Access API

डेमो

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`));
});