Window: showOpenFilePicker() Methode

options Optional

Ein Objekt, das Optionen enthält, wie folgt:

excludeAcceptAllOption Optional

Ein boolescher Wert, der standardmäßig auf false gesetzt ist. Standardmäßig sollte der Auswahldialog eine Option enthalten, um keine Dateitypfilter anzuwenden (initiiert mit der unten stehenden Typoption). Wenn diese Option auf true gesetzt wird, ist diese Option nicht verfügbar.

id Optional

Durch Angabe einer ID kann sich der Browser unterschiedliche Verzeichnisse für verschiedene IDs merken. Wenn die gleiche ID für einen anderen Auswahldialog verwendet wird, öffnet sich dieser im gleichen Verzeichnis.

multiple Optional

Ein boolescher Wert, der standardmäßig auf false gesetzt ist. Wenn auf true gesetzt, können mehrere Dateien ausgewählt werden.

startIn Optional

Ein FileSystemHandle oder ein bekanntes Verzeichnis ("desktop", "documents", "downloads", "music", "pictures" oder "videos"), um den Dialog darin zu öffnen.

types Optional

Ein Array von erlaubten Dateitypen zur Auswahl. Jedes Element ist ein Objekt mit den folgenden Optionen:

description Optional

Eine optionale Beschreibung der Kategorie erlaubter Dateitypen. Standardmäßig ein leerer String.

accept

Ein Object mit den Schlüsseln, die auf den MIME-Typ gesetzt sind und die Werte ein Array von Dateierweiterungen (siehe unten für ein Beispiel).

Ein Promise, dessen Erfolgs-Handler ein Array von FileSystemFileHandle-Objekten erhält.

AbortError DOMException

Wird ausgelöst, wenn der Benutzer den Dialog abbricht, ohne eine Auswahl zu treffen, oder wenn der Benutzeragent die ausgewählten Dateien für zu sensibel oder gefährlich hält.

SecurityError DOMException

Wird ausgelöst, wenn der Aufruf durch die Same-Origin-Policy blockiert wurde oder nicht durch eine Benutzeraktion wie einen Tastendruck aufgerufen wurde.

TypeError

Wird ausgelöst, wenn die akzeptierten Typen nicht verarbeitet werden können, was passieren kann, wenn:

• Ein Schlüsselstring der accept-Optionen eines Elements in den types-Optionen keinen gültigen MIME-Typ analysieren kann.
• Ein oder mehrere Wertstring(s) der accept-Optionen eines Elements in den types-Optionen ungültig sind, z.B. wenn sie nicht mit . beginnen und mit . enden, oder wenn sie ungültige Codepunkte enthalten und ihre Länge mehr als 16 beträgt.
• Die types-Optionen leer sind und die excludeAcceptAllOption-Optionen auf true gesetzt ist.

Vorübergehende Benutzeraktivierung ist erforderlich. Der Benutzer muss mit der Seite oder einem UI-Element interagieren, damit diese Funktion funktioniert.

Hier setzen wir das Optionsobjekt zum Übergeben in die Methode. Wir erlauben eine Auswahl von Bilddateitypen, ohne Option, alle Dateitypen oder die Auswahl mehrerer Dateien zuzulassen.

const pickerOpts = {
  types: [
    {
      description: "Images",
      accept: {
        "image/*": [".png", ".gif", ".jpeg", ".jpg"],
      },
    },
  ],
  excludeAcceptAllOption: true,
  multiple: false,
};

Als nächstes können wir eine asynchrone Funktion erstellen, die das Dateiauswahldialogfeld anzeigt und die ausgewählte Datei zurückgibt.

// create a reference for our file handle
let fileHandle;

async function getFile() {
  // open file picker, destructure the one element returned array
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // run code with our fileHandle
}

• File System API
• The File System Access API: simplifying access to local files