फ़ाइलों को खींचकर छोड़ने का तरीका

थॉमस स्टाइनर
थॉमस स्टाइनर
Twitter GitHub Glitch होम पेज

एचटीएमएल ड्रैग ऐंड ड्रॉप इंटरफ़ेस की मदद से वेब ऐप्लिकेशन, किसी वेब पेज पर खींची गई या छोड़ी गई फ़ाइलें स्वीकार कर सकते हैं. 'खींचें और छोड़ें' कार्रवाई के दौरान, ड्रैग की गई फ़ाइल और डायरेक्ट्री आइटम, फ़ाइल एंट्री और डायरेक्ट्री एंट्री से जुड़े होते हैं. जब बात फ़ाइलों को खींचकर ब्राउज़र में छोड़ने की हो, तो ऐसा करने के दो तरीके होते हैं: आधुनिक और क्लासिक.

आधुनिक तरीका

File System Access API के DataTransferItem.getAsFileSystemHandle() तरीके का इस्तेमाल करके

अगर खींचा गया आइटम कोई फ़ाइल है, तो DataTransferItem.getAsFileSystemHandle() तरीका, FileSystemFileHandle ऑब्जेक्ट के साथ एक प्रॉमिस देता है. साथ ही, अगर खींचकर छोड़ा गया आइटम कोई डायरेक्ट्री है, तो FileSystemDirectoryHandle ऑब्जेक्ट के साथ एक प्रॉमिस मिलता है. ये हैंडल, आपको फ़ाइल या डायरेक्ट्री पढ़ने और वैकल्पिक तौर पर फ़ाइल या डायरेक्ट्री में लिखने की सुविधा देते हैं. ध्यान दें कि'खींचें और छोड़ें' इंटरफ़ेस का DataTransferItem.kind, दोनों फ़ाइलों और डायरेक्ट्री के लिए "file" होगा. वहीं, फ़ाइल सिस्टम ऐक्सेस एपीआई का FileSystemHandle.kind, फ़ाइलों के लिए "file" और डायरेक्ट्री के लिए "directory" होगा.

ब्राउज़र सहायता

  • 86
  • 86
  • x
  • x

सोर्स

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

DataTransferItem.getAsFile() का क्लासिक तरीका इस्तेमाल करना

DataTransferItem.getAsFile() तरीका, 'खींचें और छोड़ें' डेटा आइटम के File ऑब्जेक्ट को दिखाता है. अगर आइटम कोई फ़ाइल नहीं है, तो यह तरीका null दिखाता है. फ़ाइल को पढ़ा जा सकता है, लेकिन उस पर जवाब लिखने का कोई तरीका नहीं है. इस तरीके का एक नुकसान यह है कि यह डायरेक्ट्री के साथ काम नहीं करती.

ब्राउज़र सहायता

  • 11
  • 12
  • 50
  • 5.1

सोर्स

प्रोग्रेसिव एन्हैंसमेंट

जब यहां दिया गया स्निपेट काम करता है, तब वह आधुनिक File System Access API के DataTransferItem.getAsFileSystemHandle() तरीके का इस्तेमाल करता है. इसके बाद, यह नॉन-स्टैंडर्ड DataTransferItem.webkitGetAsEntry() तरीके पर वापस चला जाता है और आखिर में क्लासिक DataTransferItem.getAsFile() तरीके का इस्तेमाल करता है. हर handle का टाइप ज़रूर देखें, क्योंकि वह इनमें से कोई एक हो सकता है:

  • FileSystemFileHandle जब मॉडर्न कोड पाथ चुना जाए.
  • File जब क्लासिक कोड पाथ चुना जाता है.

हर टाइप के पास name प्रॉपर्टी होती है. इसलिए, प्रॉपर्टी को लॉग करना सही है और यह हमेशा काम करेगी.

// Run feature detection.
const supportsFileSystemAccessAPI =
  'getAsFileSystemHandle' 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();
  // 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 `File`.
        : item.getAsFile(),
    );
  // Loop over the array of promises.
  for await (const handle of fileHandlesPromises) {
    // This is where we can actually exclusively act on the files.
    if (handle.kind === 'file' || handle.isFile) {
      console.log(`File: ${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 files</title>
  </head>
  <body>
    <main>
      <h1>How to drag and drop files</h1>
      <p>Drag and drop one or multiple files onto the page.</p>
      <pre></pre>
    </main>
  </body>
</html>

CSS


        :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;
}

JS


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