Window: Methode showOpenFilePicker()

Syntax

showOpenFilePicker()
showOpenFilePicker(options)

Parameter

options Optional

Ein Objekt, das Optionen enthält. Diese lauten wie folgt:

excludeAcceptAllOption Optional

Ein boolescher Wert, dessen Standardwert false ist. Standardmäßig sollte die Auswahl eine Option enthalten, keine Dateitypfilter anzuwenden (die mit der untenstehenden Typoption festgelegt werden). Wenn Sie diese Option auf true setzen, ist diese Option nicht verfügbar.

id Optional

Durch die Angabe einer ID kann der Browser unterschiedliche Verzeichnisse für unterschiedliche IDs speichern. Wenn dieselbe ID für eine andere Auswahl verwendet wird, öffnet sich die Auswahl im selben Verzeichnis.

multiple Optional

Ein boolescher Wert, dessen Standardwert false ist. Wenn er auf true gesetzt ist, können mehrere Dateien ausgewählt werden.

startIn Optional

Ein FileSystemHandle oder ein bekanntes Verzeichnis ("desktop", "documents", "downloads", "music", "pictures" oder "videos"), in dem der Dialog geöffnet werden soll.

types Optional

Ein Array zulässiger auszuwählender Dateitypen. Jedes Element ist ein Objekt mit den folgenden Optionen:

description Optional

Eine optionale Beschreibung der Kategorie zulässiger Dateitypen. Der Standardwert ist eine leere Zeichenkette.

accept

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

Rückgabewert

Ein Promise, dessen Erfüllungs-Handler ein Array von FileSystemFileHandle-Objekten empfängt.

Ausnahmen

AbortError DOMException

Wird ausgelöst, wenn die Benutzerin oder der Benutzer die Eingabeaufforderung schließt, ohne eine Auswahl zu treffen, oder wenn der User Agent ausgewählte Dateien als zu sensibel oder gefährlich einstuft.

SecurityError DOMException

Wird ausgelöst, wenn der Aufruf durch die Same-Origin-Policy blockiert wurde oder nicht über eine Benutzerinteraktion wie das Drücken einer Schaltfläche erfolgte.

TypeError

Wird ausgelöst, wenn Accept-Typen nicht verarbeitet werden können. Dies kann passieren, wenn:

• Eine Schlüsselzeichenkette der accept-Optionen eines Elements in den types-Optionen nicht als gültiger MIME-Typ geparst werden kann.
• Eine oder mehrere Wertzeichenketten der accept-Optionen eines Elements in den types-Optionen ungültig sind, beispielsweise wenn sie nicht mit . beginnen, mit . enden oder ungültige Codepunkte enthalten und länger als 16 Zeichen sind.
• Die types-Optionen leer sind und die Option excludeAcceptAllOption auf true gesetzt ist.

Sicherheit

Eine transiente Benutzeraktivierung ist erforderlich. Damit diese Funktion funktioniert, muss die Benutzerin oder der Benutzer mit der Seite oder einem UI-Element interagieren.

Beispiele

Hier legen wir das Optionsobjekt fest, das an die Methode übergeben wird. Wir erlauben eine Auswahl von Bilddateitypen, ohne Option, alle Dateitypen oder mehrere Dateien auszuwählen.

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, welche die Dateiauswahl 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
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• File System API
• The File System Access API: Vereinfachter Zugriff auf lokale Dateien