Signatur
Beschreibung
Die Methode toURL() des Interfaces FileSystemEntry gibt eine URL zurück, die auf die Datei oder das Verzeichnis im sandboxed Dateisystem des Browsers verweist. Sie beginnt mit dem Schema filesystem:, etwa filesystem:https://example.com/temporary/bilder/logo.png.
Gedacht war die Methode für Daten, die eine Web-App über die alte File and Directory Entries API (window.webkitRequestFileSystem()) im temporären oder dauerhaften Speicher ablegt. Mit der URL kann man diese Daten direkt in <img>, <video>, <a download> oder fetch() verwenden, ohne sie vorher als Blob einzulesen.
Anders als bei URL.createObjectURL() bleibt die URL gültig, solange der Eintrag existiert. Man muss sie also nicht mit revokeObjectURL() freigeben. Die URL gilt aber nur im selben Ursprung (Origin) und im selben Browserprofil.
Die Methode ist veraltet und nicht standardisiert. Die aktuelle Spezifikation (File and Directory Entries API) enthält sie nicht mehr. In neuem Code sollte man stattdessen FileSystemFileEntry.file() zusammen mit URL.createObjectURL() verwenden oder gleich auf das Origin Private File System (navigator.storage.getDirectory()) umsteigen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $mimeType | string | Optionaler MIME-Typ, den der Browser beim Laden über die URL verwenden soll (z. B. "image/png"). Gab es nur in der alten Spezifikation, die meisten Implementierungen ignorieren ihn. |
Rückgabewert
filesystem:-URL, die den Eintrag bezeichnet. Bei Einträgen ohne dauerhaftes Dateisystem (z. B. aus Drag & Drop) kann die URL leer sein oder sich nicht laden lassen.Beispiele
Bild im temporären Dateisystem speichern und anzeigen
// Nur in Chromium-Browsern verfügbar
const requestFS = window.requestFileSystem || window.webkitRequestFileSystem;
requestFS(window.TEMPORARY, 5 * 1024 * 1024, async (fs) => {
const response = await fetch('/assets/logo.png');
const blob = await response.blob();
fs.root.getFile('logo.png', { create: true }, (fileEntry) => {
fileEntry.createWriter((writer) => {
writer.onwriteend = () => {
const url = fileEntry.toURL();
console.log(url);
document.querySelector('#preview').src = url;
};
writer.write(blob);
});
}, console.error);
}, console.error);Funktionsprüfung mit modernem Ersatz über Blob-URL
// Liefert eine URL für einen FileSystemFileEntry – mit toURL() oder als Ersatz über eine Blob-URL
const getEntryUrl = (fileEntry) => new Promise((resolve, reject) => {
if (typeof fileEntry.toURL === 'function') {
const url = fileEntry.toURL();
if (url) return resolve({ url, revoke: () => {} });
}
fileEntry.file((file) => {
const url = URL.createObjectURL(file);
resolve({ url, revoke: () => URL.revokeObjectURL(url) });
}, reject);
});
// Nutzung mit Drag & Drop
const dropZone = document.querySelector('#drop');
dropZone.addEventListener('dragover', (e) => e.preventDefault());
dropZone.addEventListener('drop', async (e) => {
e.preventDefault();
const entry = e.dataTransfer.items[0]?.webkitGetAsEntry();
if (entry?.isFile) {
const { url } = await getEntryUrl(entry);
console.log('Vorschau-URL:', url);
}
});Verzeichnisinhalt als Download-Links auflisten
const listAsLinks = (dirEntry) => {
const reader = dirEntry.createReader();
reader.readEntries((entries) => {
const list = document.querySelector('#files');
for (const entry of entries.filter((e) => e.isFile)) {
const a = document.createElement('a');
a.href = entry.toURL();
a.download = entry.name;
a.textContent = entry.name;
list.append(a, document.createElement('br'));
}
});
};
window.webkitRequestFileSystem(window.TEMPORARY, 1024 * 1024, (fs) => listAsLinks(fs.root));// Wichtig · Fallstricke
- Veraltet und nicht standardisiert:
toURL()gehört nicht mehr zur aktuellen Spezifikation. Firefox und Safari haben die Methode nie unterstützt, Chromium nur zusammen mitwebkitRequestFileSystem(). Vor dem Aufruf immer mittypeof entry.toURL === 'function'prüfen. - Das Schema
filesystem:gibt es nur in Chromium. Andere Browser können solche URLs nicht auflösen. Deshalb eignen sie sich nicht zum Speichern oder Weitergeben, etwa an einen Server oder in andere Browser. - Same-Origin: Die URL lässt sich nur im selben Ursprung laden. Im Inkognito-Modus oder nach dem Leeren des Speichers ist sie ungültig. Einträge im Dateisystem
TEMPORARYkann der Browser jederzeit löschen. - Drag & Drop und
<input webkitdirectory>: Diese Einträge stammen aus einem isolierten Dateisystem.toURL()liefert hier je nach Version eine leere oder nicht ladbare URL. Nutzen Sie stattdessenfile()undURL.createObjectURL(). - Moderne Alternative: das Origin Private File System über
navigator.storage.getDirectory()(File System API, Baseline in allen aktuellen Browsern). Dort ruft mangetFile()auf und erzeugt anschließend eine Blob-URL.