HTMLInputElement.webkitdirectory — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.webkitdirectory

Beschreibung

Die Eigenschaft webkitdirectory gehört zu HTMLInputElement und spiegelt das gleichnamige HTML-Attribut wider. Ist sie true, zeigt ein <input type="file"> statt der normalen Dateiauswahl einen Ordner-Dialog. Nach der Auswahl enthält input.files alle Dateien des gewählten Verzeichnisses, auch die aus Unterordnern. Die Ordnerstruktur ist also flach aufgelistet.

Jedes File-Objekt hat dann die Eigenschaft webkitRelativePath. Sie enthält den Pfad relativ zum gewählten Ordner, zum Beispiel "fotos/urlaub/strand.jpg". Daraus lässt sich die Verzeichnisstruktur wieder aufbauen, etwa für Uploads ganzer Projektordner, Foto-Importe oder Werkzeuge, die lokale Dateien im Browser verarbeiten.

Die Eigenschaft lässt sich lesen und setzen. Setzt man sie per JavaScript auf true, entspricht das dem Attribut webkitdirectory im HTML. Setzt man sie auf false, wird das Attribut entfernt. Nur bei type="file" hat sie eine Wirkung.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut webkitdirectory gesetzt ist und ein Ordner ausgewählt wird. Sonst false. Die Eigenschaft ist les- und schreibbar.

Beispiele

Ordner-Auswahl per JavaScript aktivieren

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

// Prüfen, ob der Browser die Eigenschaft kennt
if ('webkitdirectory' in input) {
  input.webkitdirectory = true;
  console.log('Ordnerauswahl aktiv:', input.webkitdirectory);
  console.log('Attribut gesetzt:', input.hasAttribute('webkitdirectory'));
} else {
  console.warn('Ordnerauswahl wird nicht unterstützt');
}

Ordnerauswahl aktiv: true Attribut gesetzt: true

Alle Dateien eines Ordners mit relativem Pfad auflisten

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

input.addEventListener('change', () => {
  liste.replaceChildren();
  for (const file of input.files) {
    const li = document.createElement('li');
    // textContent statt innerHTML: Dateinamen sind Benutzereingaben
    li.textContent = `${file.webkitRelativePath} (${file.size} Bytes)`;
    liste.append(li);
  }
  console.log(`${input.files.length} Dateien gefunden`);
});

3 Dateien gefunden

Ordner hochladen und dabei die Pfade erhalten

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

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

Upload-Status: 200

Dateien nach Unterordner gruppieren

const gruppiereNachOrdner = (files) => {
  const gruppen = new Map();
  for (const file of files) {
    const teile = file.webkitRelativePath.split('/');
    const ordner = teile.slice(0, -1).join('/');
    if (!gruppen.has(ordner)) gruppen.set(ordner, []);
    gruppen.get(ordner).push(file.name);
  }
  return gruppen;
};

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

{ "projekt": ["index.html"], "projekt/css": ["style.css"] }

// Wichtig · Fallstricke

Nicht standardisiert, aber weit verbreitet: Trotz des webkit-Präfixes unterstützen Chrome, Edge, Firefox und Safari die Eigenschaft auf dem Desktop. Auf Mobilgeräten ist die Unterstützung eingeschränkt oder fehlt ganz, zum Beispiel unter iOS. Vorher mit 'webkitdirectory' in input prüfen.
Leere Ordner fehlen: input.files enthält nur Dateien. Leere Unterverzeichnisse lassen sich so nicht erkennen.
Leistung: Bei großen Ordnern, etwa mit node_modules, kann files Zehntausende Einträge enthalten. Den Upload filtern oder in kleinen Teilen verarbeiten.
Kein Filtern nach Dateityp: Das Attribut accept wird zusammen mit webkitdirectory meist ignoriert. Nach Dateiendung oder MIME-Typ selbst filtern.
Nur ein Ordner: Pro Auswahl wird ein Verzeichnis gewählt. multiple hat hier je nach Browser keine oder keine verlässliche Wirkung.
Sicherheit: Dateinamen und Pfade kommen vom Benutzer. Sie nie per innerHTML ausgeben (XSS-Gefahr). Auf dem Server webkitRelativePath auf Path-Traversal wie ../ prüfen. Browser zeigen vor dem Hochladen eines Ordners oft eine Bestätigung an.
Alternativen: Für Drag & Drop gibt es DataTransferItem.webkitGetAsEntry(). Für Lese- und Schreibzugriff auf Ordner gibt es window.showDirectoryPicker() aus der File System Access API, bisher nur in Chromium-Browsern.

Siehe auch

HTMLInputElement HTMLInputElement.files File.webkitRelativePath FileList DataTransferItem.webkitGetAsEntry() window.showDirectoryPicker()