ফাইল এক্সপ্লোরার থেকে খোলা ফাইলগুলি কীভাবে পরিচালনা করবেন

প্যালেন্স লিয়াও
Palances Liao

আধুনিক উপায়

ফাইল হ্যান্ডলিং API ব্যবহার করে

প্রথমে, আপনার ওয়েব অ্যাপ ম্যানিফেস্টে file_handlers অ্যাট্রিবিউট ঘোষণা করুন। ফাইল হ্যান্ডলিং এপিআই-এর জন্য আপনাকে action প্রপার্টি (একটি হ্যান্ডলিং ইউআরএল) এবং accept প্রপার্টি নির্দিষ্ট করতে হবে, যা বিশেষ করে সংশ্লিষ্ট ফাইল এক্সটেনশনের কী এবং অ্যারে হিসেবে MIME ধরনের একটি বস্তু।

{
  "file_handlers": [
    {
      "action": "./",
      "accept": {
        "image/*": [".jpg", ".jpeg", ".png", ".webp", ".svg"]
      }
    }
  ]
}

এরপরে, আপনাকে ফাইল হ্যান্ডলিং এপিআই ব্যবহার করতে হবে launchQueue মাধ্যমে খোলা ফাইলগুলিকে অপরিহার্যভাবে মোকাবেলা করতে।

if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  launchQueue.setConsumer((launchParams) => {
    if (!launchParams.files.length) {
      return;
    }
    for (const fileHandle of launchParams.files) {
      // Handle the file.
    }
  });
}

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

  • 102
  • 102
  • এক্স
  • এক্স

উৎস

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

ক্লাসিক DataTransferItem.getAsFile() পদ্ধতি ব্যবহার করে

ফাইল হ্যান্ডলিং API সমর্থিত না হলে, আপনি এখনও ফাইল এক্সপ্লোরার থেকে ফাইলগুলিকে অ্যাপে টেনে আনতে এবং ফেলে দিতে পারেন৷ DataTransferItem.getAsFile() পদ্ধতি ড্র্যাগ ডেটা আইটেমের File অবজেক্ট ফেরত দেয়। আইটেমটি একটি ফাইল না হলে, এই পদ্ধতিটি null প্রদান করে। আপনি যখন ফাইলটি পড়তে পারেন, এটিতে ফিরে লেখার কোন উপায় নেই। এই পদ্ধতির অসুবিধা রয়েছে যে এটি ডিরেক্টরিগুলিকে সমর্থন করে না।

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

  • 11
  • 12
  • 50
  • 5.1

উৎস

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

নিচের স্নিপেটটি ফাইল হ্যান্ডলিং এপিআই ব্যবহার করে যখন এটি উপলব্ধ থাকে, এবং অতিরিক্তভাবে টেনে আনা এবং ড্রপ হ্যান্ডলারদের নিবন্ধন করে যাতে টেনে আনা ফাইলগুলি পরিচালনা করা যায়।

ওয়েব অ্যাপ ম্যানিফেস্টে যে ফাইলগুলি পরিচালনা করা যেতে পারে সেগুলি ঘোষণা করুন৷ যে ব্রাউজারগুলি ফাইল হ্যান্ডলিং API সমর্থন করে না তারা কেবল এটিকে উপেক্ষা করবে৷

{
  "file_handlers": [
    {
      "action": "./",
      "accept": {
        "image/*": [".jpg", ".jpeg", ".png", ".webp", ".svg"]
      }
    }
  ]
}

// File Handling API
const handleLaunchFiles = () => {
  window.launchQueue.setConsumer((launchParams) => {
    if (!launchParams.files.length) {
      return;
    }
    launchParams.files.forEach(async (handle) => {
      const file = await handle.getFile();
      console.log(`File: ${file.name}`);
      // Do something with the file.
    });
  });
};

if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  handleLaunchFiles();
}

// 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) => 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.isFile) {
      console.log(`File: ${handle.name}`);
      // Do something with the file.
    }
  }
});

আরও পড়া

ডেমো

এইচটিএমএল

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="manifest" href="manifest.json" />
    <title>How to handle files opened from the file explorer</title>
    <link rel="stylesheet" href="style.css" />
    <!-- TODO: Devsite - Removed inline handlers -->
    <!-- <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', async () => {
          const registration = await navigator.serviceWorker.register(
            'sw.js',
          );
          console.log(
            'Service worker registered for scope',
            registration.scope,
          );
        });
      }
    </script>
    <script src="script.js" type="module"></script> -->
  </head>
  <body>
    <h1>How to handle files opened from the file explorer</h1>
    <p>Install the app. After the installation, try opening an image file from the file explorer with the app.
  </body>
</html>

সিএসএস


        html {
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
  color-scheme: dark light;
}

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

body {
  margin: 1rem;
}

img {
  height: auto;
  max-width: 100%;
  display: block;
}

জেএস


        if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  launchQueue.setConsumer((launchParams) => {
    if (!launchParams.files.length) {
      return;
    }
    for (const fileHandle of launchParams.files) {
      document.body.innerHTML += `
${fileHandle.name}
`;
    }
  });
}