FileSystemEntry.fullPath — Eigenschaft · JavaScript-Referenz

Signatur

FileSystemEntry.fullPath

Beschreibung

Die Eigenschaft fullPath eines FileSystemEntry (also eines FileSystemFileEntry oder FileSystemDirectoryEntry) liefert den vollständigen Pfad des Eintrags. Der Pfad beginnt immer mit einem Schrägstrich /, der für die Wurzel des Dateisystems steht, zu dem der Eintrag gehört (siehe FileSystemEntry.filesystem).

In der Praxis begegnet man fullPath vor allem beim Drag & Drop von Ordnern: Über DataTransferItem.webkitGetAsEntry() erhält man Einträge, deren Pfad sich auf ein virtuelles Dateisystem bezieht, das nur die abgelegten Elemente enthält. Ein abgelegter Ordner Projekte hat dann z. B. den Pfad /Projekte, eine Datei darin /Projekte/notiz.txt. Damit lässt sich beim rekursiven Durchlaufen die Ordnerstruktur erhalten – etwa für Uploads, die die Verzeichnishierarchie auf dem Server nachbilden sollen.

Wichtig: fullPath ist kein Pfad im echten Dateisystem des Nutzers. Aus Datenschutzgründen legt der Browser niemals absolute Pfade wie C:\Users\... offen. Nur der Dateiname steht zusätzlich separat in FileSystemEntry.name zur Verfügung.

Rückgabewert

Typ

string

Beschreibung

Absoluter Pfad des Eintrags innerhalb seines virtuellen Dateisystems, beginnend mit /, Pfadsegmente getrennt durch /.

Beispiele

Pfad abgelegter Elemente anzeigen

const dropZone = document.querySelector('#drop-zone');

dropZone.addEventListener('dragover', (event) => event.preventDefault());

dropZone.addEventListener('drop', (event) => {
  event.preventDefault();
  for (const item of event.dataTransfer.items) {
    const entry = item.webkitGetAsEntry();
    if (!entry) continue;
    const art = entry.isDirectory ? 'Ordner' : 'Datei';
    console.log(`${art}: ${entry.fullPath}`);
  }
});

Ordner: /Projekte Datei: /bericht.pdf

Ordner rekursiv durchlaufen und relative Pfade sammeln

// readEntries() liefert Ergebnisse in Blöcken – so lange lesen, bis leer
const readAllEntries = (dirEntry) => new Promise((resolve, reject) => {
  const reader = dirEntry.createReader();
  const result = [];
  const readBatch = () => {
    reader.readEntries((batch) => {
      if (batch.length === 0) return resolve(result);
      result.push(...batch);
      readBatch();
    }, reject);
  };
  readBatch();
});

const collectFiles = async (entry, files = []) => {
  if (entry.isFile) {
    files.push(entry.fullPath);
  } else if (entry.isDirectory) {
    for (const child of await readAllEntries(entry)) {
      await collectFiles(child, files);
    }
  }
  return files;
};

document.querySelector('#drop-zone').addEventListener('drop', async (event) => {
  event.preventDefault();
  const entries = [...event.dataTransfer.items]
    .map((item) => item.webkitGetAsEntry())
    .filter(Boolean);
  for (const entry of entries) {
    console.log(await collectFiles(entry));
  }
});

["/Projekte/notiz.txt", "/Projekte/bilder/logo.png"]

Ordnerstruktur beim Upload erhalten

const uploadEntry = (fileEntry) => new Promise((resolve, reject) => {
  fileEntry.file(async (file) => {
    const formData = new FormData();
    // Führenden Schrägstrich entfernen, damit der Server einen relativen Pfad erhält
    const relativePath = fileEntry.fullPath.replace(/^\//, '');
    formData.append('datei', file, file.name);
    formData.append('pfad', relativePath);
    try {
      const response = await fetch('/upload', { method: 'POST', body: formData });
      resolve(response.ok);
    } catch (err) {
      reject(err);
    }
  }, reject);
});

// Wichtig · Fallstricke

Virtueller Pfad: fullPath bezieht sich auf das vom Browser erzeugte Sandbox-Dateisystem, nicht auf den echten Speicherort. Verlasse dich nie darauf, daraus den Originalpfad ableiten zu können.
Serverseitige Validierung: Wenn du fullPath an einen Server schickst, um Verzeichnisse anzulegen, prüfe den Wert dort unbedingt (z. B. auf ..-Segmente, Sonderzeichen, reservierte Namen), um Path-Traversal-Angriffe zu verhindern – Anfragen lassen sich beliebig manipulieren.
Schreibgeschützt: Zuweisungen an fullPath werden ignoriert (bzw. werfen im Strict Mode einen TypeError).
Kompatibilität: Die File and Directory Entries API ist in Chrome, Edge, Firefox und Safari verfügbar, der Einstieg erfolgt aber über die präfixierte Methode webkitGetAsEntry(). Für <input type="file" webkitdirectory> steht stattdessen File.webkitRelativePath zur Verfügung. Für neuen Code mit Lese-/Schreibzugriff ist die File System Access API (FileSystemHandle) die modernere Alternative – dort gibt es kein fullPath, Pfade ermittelt man über FileSystemDirectoryHandle.resolve().

Siehe auch

FileSystemEntry.filesystem FileSystemEntry.name FileSystemEntry.isFile FileSystemEntry.isDirectory FileSystem.name