نحوه مدیریت فایل های باز شده از کاوشگر فایل

کاخ لیائو
Palances Liao

روش مدرن

با استفاده از File Handling API

ابتدا ویژگی file_handlers را در مانیفست برنامه وب خود اعلام کنید. File Handling API از شما می‌خواهد که ویژگی action (URL رسیدگی) و ویژگی accept را مشخص کنید، که یک شی با انواع MIME به عنوان کلیدها و آرایه‌های پسوندهای فایل مربوطه است.

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

در مرحله بعد، باید از File Handling API استفاده کنید تا به طور ضروری با فایل های باز شده از طریق 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()

اگر File Handling API پشتیبانی نمی‌شود، همچنان می‌توانید فایل‌ها را از کاوشگر فایل به داخل برنامه بکشید و رها کنید. متد DataTransferItem.getAsFile() شی File مورد داده را برمی گرداند. اگر مورد یک فایل نباشد، این روش null را برمی‌گرداند. در حالی که می توانید فایل را بخوانید، هیچ راهی برای نوشتن مجدد به آن وجود ندارد. این روش دارای این عیب است که از دایرکتوری ها پشتیبانی نمی کند.

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

  • 11
  • 12
  • 50
  • 5.1

منبع

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

قطعه زیر از File Handling API زمانی که در دسترس باشد استفاده می‌کند، و همچنین کنترل‌کننده‌های کشیدن و رها کردن را ثبت می‌کند تا فایل‌های کشیده شده را بتوان مدیریت کرد.

انواع فایل هایی را که می توان در مانیفست برنامه وب مدیریت کرد، اعلام کنید. مرورگرهایی که از File Handling 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.
    }
  }
});

بیشتر خواندن

نسخه ی نمایشی

HTML

<!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>

CSS


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

JS


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