DataTransferItem.type — Eigenschaft · JavaScript-Referenz

Signatur

DataTransferItem.type

Beschreibung

Die Eigenschaft type eines DataTransferItem gibt an, in welchem Format die Daten des Elements vorliegen. Meist ist das ein MIME-Typ wie text/plain, text/html, text/uri-list oder bei Dateien z. B. image/jpeg und application/pdf. Der Wert ist ein String und lässt sich nicht verändern.

In der Praxis nutzt man type zusammen mit kind, um in drop- oder paste-Handlern die passenden Elemente herauszufiltern. So kann man etwa nur Bilder annehmen, HTML-Inhalte anders behandeln als reinen Text oder Dateien ablehnen, deren Format nicht unterstützt wird.

Wichtig: Bei Elementen mit kind === "file" entspricht type dem MIME-Typ, den der Browser bzw. das Betriebssystem für die Datei ermittelt hat. Dieser Wert beruht meist auf der Dateiendung und kann leer sein, wenn der Typ unbekannt ist. Bei kind === "string" steht hier das Format, das beim Aufruf von DataTransfer.setData() oder von der Quellanwendung angegeben wurde.

Rückgabewert

Typ

string

Beschreibung

Der Typ bzw. das Format des Elements, üblicherweise ein MIME-Typ wie text/plain oder image/png. Kann ein leerer String sein, wenn der Typ einer Datei unbekannt ist.

Beispiele

Typen aller abgelegten Elemente ausgeben

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

dropZone.addEventListener('dragover', (event) => {
  event.preventDefault(); // Ablegen erlauben
});

dropZone.addEventListener('drop', (event) => {
  event.preventDefault();
  for (const item of event.dataTransfer.items) {
    console.log(`kind: ${item.kind}, type: ${item.type}`);
  }
});

kind: string, type: text/plain kind: string, type: text/html

Nur Bilder aus der Zwischenablage übernehmen

document.addEventListener('paste', (event) => {
  const images = [...event.clipboardData.items]
    .filter((item) => item.kind === 'file' && item.type.startsWith('image/'));

  for (const item of images) {
    const file = item.getAsFile();
    const img = document.createElement('img');
    img.src = URL.createObjectURL(file);
    img.onload = () => URL.revokeObjectURL(img.src);
    document.body.append(img);
    console.log(`Bild eingefügt: ${item.type}, ${file.size} Bytes`);
  }
});

Bild eingefügt: image/png, 48213 Bytes

HTML bevorzugen, sonst reinen Text nutzen

const editor = document.querySelector('#editor');

editor.addEventListener('dragover', (e) => e.preventDefault());

editor.addEventListener('drop', (event) => {
  event.preventDefault();
  const items = [...event.dataTransfer.items];
  const item =
    items.find((i) => i.kind === 'string' && i.type === 'text/html') ??
    items.find((i) => i.kind === 'string' && i.type === 'text/plain');

  if (!item) return;
  item.getAsString((data) => {
    console.log(`Verwende ${item.type}:`, data.slice(0, 40));
  });
});

Verwende text/html: <meta charset='utf-8'><b>Hallo</b> Welt

// Wichtig · Fallstricke

Nicht auf type für Sicherheitsprüfungen verlassen: Bei Dateien ergibt sich der MIME-Typ meist aus der Dateiendung. Nutzer können ihn also leicht fälschen. Prüfe hochgeladene Inhalte deshalb serverseitig, etwa anhand der Magic Bytes.
Leerer String möglich: Kennt der Browser den Dateityp nicht (z. B. bei .heic oder Dateien ohne Endung), ist type gleich "". Plane dafür einen Ausweichweg ein, etwa eine Prüfung über file.name.
Geschützter Modus: Während dragenter und dragover kann man kind und type lesen, die eigentlichen Daten aber noch nicht. So lässt sich schon beim Überfahren entscheiden, ob das Ablegen erlaubt wird.
Kleinschreibung: Typen, die mit setData() gesetzt werden, wandelt der Browser in Kleinbuchstaben um. Vergleiche also mit kleingeschriebenen Strings.
Die Eigenschaft wird in allen modernen Browsern unterstützt. In Safari werden Dateien beim Drag & Drop teils erst beim drop vollständig bereitgestellt.

Siehe auch

DataTransferItem DataTransferItem.kind DataTransferItem.getAsFile() DataTransferItem.getAsString() DataTransfer.types DataTransferItemList