FileSystemHandle.remove() — Methode · JavaScript-Referenz

Signatur

FileSystemHandle.prototype.remove(options)

Beschreibung

Die Methode remove() gehört zur File System API. Sie löscht den Eintrag, der durch einen FileSystemFileHandle oder FileSystemDirectoryHandle dargestellt wird. Bei FileSystemDirectoryHandle.removeEntry() braucht man das übergeordnete Verzeichnis und den Namen des Eintrags. remove() arbeitet dagegen direkt mit dem Handle selbst. Das ist praktisch, wenn man nur den Handle einer Datei hat, zum Beispiel aus window.showOpenFilePicker(), und kein Handle auf den Ordner.

Die Methode funktioniert im Origin Private File System (OPFS, erreichbar über navigator.storage.getDirectory()) und im Dateisystem des Nutzers. Bei Handles auf das Dateisystem des Nutzers braucht die Seite eine Schreibberechtigung (mode: "readwrite"). Diese kann man mit requestPermission() anfordern. Im OPFS ist keine Berechtigungsabfrage nötig.

Ein Verzeichnis, das nicht leer ist, lässt sich nur mit der Option recursive: true löschen. Ohne diese Option wird das Promise mit einem InvalidModificationError abgelehnt. Die Methode gibt ein Promise zurück, das nach erfolgreichem Löschen mit undefined erfüllt wird.

Parameter

Name	Typ	Default	Beschreibung
$options	object	{}	Optionales Objekt mit Einstellungen zum Löschen.
$options.recursive	boolean	false	Bei `true` werden Verzeichnisse mit ihrem gesamten Inhalt gelöscht. Bei `false` lassen sich nur Dateien und leere Verzeichnisse entfernen.

Rückgabewert

Typ

Promise<undefined>

Beschreibung

Ein Promise, das nach erfolgreichem Löschen mit undefined erfüllt wird. Bei einem Fehler wird es mit einer DOMException abgelehnt: NotAllowedError (keine Schreibberechtigung), InvalidModificationError (Verzeichnis nicht leer und recursive ist false), NoModificationAllowedError (Eintrag gesperrt, z. B. durch ein offenes FileSystemSyncAccessHandle oder einen laufenden Schreibvorgang) oder NotFoundError (Eintrag existiert nicht mehr).

Beispiele

Vom Nutzer gewählte Datei löschen

const deleteBtn = document.querySelector('#delete');

deleteBtn.addEventListener('click', async () => {
  try {
    const [fileHandle] = await window.showOpenFilePicker();

    // Schreibberechtigung prüfen bzw. anfordern
    const perm = await fileHandle.requestPermission({ mode: 'readwrite' });
    if (perm !== 'granted') {
      console.warn('Keine Berechtigung zum Löschen');
      return;
    }

    await fileHandle.remove();
    console.log(`${fileHandle.name} wurde gelöscht`);
  } catch (err) {
    console.error(err.name, err.message);
  }
});

notizen.txt wurde gelöscht

Cache-Verzeichnis im OPFS rekursiv entfernen

const clearCache = async () => {
  const root = await navigator.storage.getDirectory();
  const cacheDir = await root.getDirectoryHandle('cache', { create: true });

  // Testdatei anlegen, damit das Verzeichnis nicht leer ist
  const file = await cacheDir.getFileHandle('daten.json', { create: true });
  const writable = await file.createWritable();
  await writable.write(JSON.stringify({ ts: Date.now() }));
  await writable.close();

  try {
    await cacheDir.remove(); // schlägt fehl: Verzeichnis nicht leer
  } catch (err) {
    console.log('Erster Versuch:', err.name);
  }

  await cacheDir.remove({ recursive: true });
  console.log('Cache-Verzeichnis entfernt');
};

clearCache();

Erster Versuch: InvalidModificationError Cache-Verzeichnis entfernt

Mit Feature-Erkennung und Rückfall auf removeEntry()

const deleteFile = async (dirHandle, name) => {
  const fileHandle = await dirHandle.getFileHandle(name);

  if ('remove' in FileSystemHandle.prototype) {
    await fileHandle.remove();
  } else {
    // Standardisierter Weg über das übergeordnete Verzeichnis
    await dirHandle.removeEntry(name);
  }
  console.log(`${name} gelöscht`);
};

const root = await navigator.storage.getDirectory();
await root.getFileHandle('temp.txt', { create: true });
await deleteFile(root, 'temp.txt');

temp.txt gelöscht

// Wichtig · Fallstricke

Nicht standardisiert: remove() steht nicht in der WHATWG-Spezifikation. Nur Chromium-basierte Browser unterstützen die Methode (Chrome/Edge ab 110). Firefox und Safari haben sie nicht. Prüfe daher vorher mit 'remove' in FileSystemHandle.prototype, ob sie verfügbar ist. Als Alternative, die überall funktioniert, gibt es FileSystemDirectoryHandle.removeEntry().
Nur in sicheren Kontexten: Die Methode ist nur über HTTPS oder auf localhost verfügbar. showOpenFilePicker() braucht außerdem eine Nutzeraktion, zum Beispiel einen Klick.
Endgültiges Löschen: Der Eintrag landet nicht im Papierkorb. Er wird dauerhaft gelöscht. Frage den Nutzer bei Dateien auf seinem Dateisystem deshalb vorher um Bestätigung.
Gesperrte Einträge: Ist für eine Datei noch ein FileSystemSyncAccessHandle offen oder läuft ein FileSystemWritableFileStream, schlägt das Löschen mit NoModificationAllowedError fehl. Schließe diese Handles vorher mit close().
Nach dem Löschen bleibt das Handle-Objekt bestehen. Weitere Zugriffe darauf, etwa mit getFile(), führen dann zu einem NotFoundError.

Siehe auch

FileSystemDirectoryHandle.entries() FileSystemHandle.isSameEntry() FileSystemHandle.queryPermission() FileSystemHandle.requestPermission() FileSystemEntry.remove()