File.webkitRelativePath — Eigenschaft · JavaScript-Referenz

Signatur

get File.prototype.webkitRelativePath

Beschreibung

Die schreibgeschützte Eigenschaft webkitRelativePath eines File-Objekts enthält eine Zeichenkette mit dem Pfad der Datei relativ zum ausgewählten Stammverzeichnis. Das Stammverzeichnis gehört selbst zum Pfad, z. B. "fotos/urlaub/strand.jpg", wenn der Benutzer den Ordner fotos ausgewählt hat. Als Trennzeichen dient in allen Betriebssystemen der Schrägstrich /.

Einen Wert hat die Eigenschaft nur, wenn die Datei über ein <input type="file">-Element mit dem Attribut webkitdirectory ausgewählt wurde. Dann enthält input.files rekursiv alle Dateien des Ordners samt Unterordnern. In allen anderen Fällen, also bei normaler Dateiauswahl, Drag & Drop oder new File(), ist der Wert eine leere Zeichenkette "".

Typische Einsatzfälle:

Hochladen ganzer Ordner, ohne dass die Verzeichnisstruktur verloren geht
Dateibäume im Client anzeigen
Dateien vor dem Hochladen nach Unterordnern filtern oder gruppieren

Rückgabewert

Typ

string

Beschreibung

Relativer Pfad inklusive Name des ausgewählten Stammordners, getrennt durch /. Wurde die Datei nicht per Ordnerauswahl gewählt, ist der Wert "".

Beispiele

Alle Dateien eines ausgewählten Ordners auflisten

// HTML: <input type="file" id="ordner" webkitdirectory multiple>
const input = document.querySelector('#ordner');

input.addEventListener('change', () => {
  for (const file of input.files) {
    console.log(`${file.webkitRelativePath} (${file.size} Bytes)`);
  }
});

projekt/index.html (1024 Bytes) projekt/css/style.css (2048 Bytes) projekt/js/app.js (4096 Bytes)

Ordner mit Struktur per FormData hochladen

const input = document.querySelector('#ordner');

input.addEventListener('change', async () => {
  const formData = new FormData();
  for (const file of input.files) {
    // Dritter Parameter = Dateiname, hier der relative Pfad
    formData.append('dateien', file, file.webkitRelativePath);
  }
  const response = await fetch('/upload', { method: 'POST', body: formData });
  console.log('Status:', response.status);
});

Status: 200

Dateien nach Unterordner gruppieren

const gruppiereNachOrdner = (files) => {
  const gruppen = new Map();
  for (const file of files) {
    const teile = file.webkitRelativePath.split('/');
    teile.pop(); // Dateiname entfernen
    const ordner = teile.join('/') || '(Wurzel)';
    if (!gruppen.has(ordner)) gruppen.set(ordner, []);
    gruppen.get(ordner).push(file.name);
  }
  return gruppen;
};

document.querySelector('#ordner').addEventListener('change', (e) => {
  console.log(gruppiereNachOrdner(e.target.files));
});

Map(2) { 'projekt' => ['index.html'], 'projekt/css' => ['style.css'] }

Leerer Wert außerhalb der Ordnerauswahl

const datei = new File(['Hallo'], 'gruss.txt', { type: 'text/plain' });
console.log(JSON.stringify(datei.webkitRelativePath));

""

// Wichtig · Fallstricke

Nur mit webkitdirectory: Ohne dieses Attribut ist der Wert immer "". Frage deshalb im Code mit file.webkitRelativePath || file.name ab, damit es einen Rückfallwert gibt.
Drag & Drop: Bei Dateien, die per Drag & Drop abgelegt werden, ist die Eigenschaft leer. Für Ordner gibt es dort DataTransferItem.webkitGetAsEntry() und FileSystemEntry.fullPath.
Nicht standardisiert: Trotz des Präfixes webkit unterstützen Chrome, Edge, Firefox und Safari die Eigenschaft. Sie ist jedoch nur im WHATWG-Entwurf „File and Directory Entries“ beschrieben. Für neue Anwendungen mit Lese- und Schreibzugriff eignet sich die File System Access API (showDirectoryPicker()) besser, sie wird aber nur von Chromium-Browsern unterstützt.
Leere Ordner tauchen in input.files nicht auf, weil nur Dateien aufgelistet werden.
Sicherheit: Der Pfad ist Benutzereingabe. Prüfe ihn auf dem Server gegen Path Traversal (../), bevor Dateien dort gespeichert werden. Füge ihn außerdem nie ungeprüft per innerHTML ins DOM ein, sonst droht XSS.
Leistung: Wählt der Benutzer sehr große Ordner aus, kann die Liste Tausende Einträge haben. Verarbeite sie dann in Teilen.
Auf Mobilgeräten wird die Ordnerauswahl oft nicht unterstützt.

Siehe auch

File File.name File.lastModifiedDate File.lastModified FileList.length