Cette page a été traduite par l'API Cloud Translation.

Gérer les fichiers ouverts à partir de l'explorateur de fichiers

Palances Liao

Méthode moderne

Utiliser l'API File Handling

Commencez par déclarer l'attribut file_handlers dans le fichier manifeste de votre application Web. L'API File Handling nécessite de spécifier la propriété action (une URL de traitement) et la propriété accept, qui est un objet avec des types MIME sous forme de clés et de tableaux des extensions de fichier particulièrement correspondantes.

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

Ensuite, vous devez utiliser l'API File Handling pour traiter de manière impérative les fichiers ouverts via 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.
    }
  });
}

Navigateurs pris en charge

Méthode classique

Utiliser la méthode `DataTransferItem.getAsFile()` classique

Si l'API File Handling n'est pas compatible, vous pouvez toujours glisser-déposer des fichiers de l'explorateur de fichiers dans l'application. La méthode DataTransferItem.getAsFile() renvoie l'objet File de l'élément de données de déplacement. Si l'élément n'est pas un fichier, cette méthode renvoie null. Vous pouvez lire le fichier, mais il n'y a aucun moyen d'y réécrire. Cette méthode a l'inconvénient de ne pas être compatible avec les répertoires.

Navigateurs pris en charge

Source

amélioration progressive

L'extrait ci-dessous utilise l'API File Handling (si disponible) et enregistre des gestionnaires de glisser-déposer afin de pouvoir gérer les fichiers glissés.

Déclarez les types de fichiers pouvant être gérés dans le fichier manifeste de l'application Web. Les navigateurs qui ne sont pas compatibles avec l'API File Handling ignorent simplement cet élément.

{
  "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.
    }
  }
});

Complément d'informations

Démonstration

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