Blob.type — Eigenschaft · JavaScript-Referenz

Signatur

Blob.type

Beschreibung

Die Eigenschaft type eines Blob-Objekts (und damit auch jedes File-Objekts, das von Blob erbt) enthält den MIME-Typ der Daten, zum Beispiel "image/png", "application/json" oder "text/plain;charset=utf-8". Den Wert legt man beim Erzeugen über die Option type im Konstruktor fest oder bei Blob.prototype.slice() über den dritten Parameter contentType.

Bei File-Objekten aus einem <input type="file"> oder aus Drag&Drop leitet der Browser den Typ meist aus der Dateiendung ab und nicht aus dem tatsächlichen Inhalt. Ist die Endung unbekannt, bleibt type ein leerer String.

Typische Einsatzfälle sind die Prüfung vor dem Hochladen (z. B. „nur Bilder zulassen“), die Auswahl einer passenden Vorschau-Darstellung und das Setzen des Content-Type-Headers. Wenn ein Blob als Body an fetch() übergeben wird, übernimmt der Browser type automatisch als Content-Type, sofern er nicht leer ist.

Rückgabewert

Typ

string

Beschreibung

Der MIME-Typ in Kleinbuchstaben oder "", wenn der Typ unbekannt oder ungültig ist.

Beispiele

Typ beim Erzeugen festlegen und auslesen

const json = JSON.stringify({ id: 1, name: 'Anna' });
const blob = new Blob([json], { type: 'application/json' });
console.log(blob.type);

// Großbuchstaben werden normalisiert
const upper = new Blob(['Hallo'], { type: 'Text/Plain' });
console.log(upper.type);

// Ohne Angabe ist der Typ leer
console.log(new Blob(['x']).type === '');

application/json text/plain true

Upload auf Bilder beschränken

const input = document.querySelector('#avatar');
const erlaubt = ['image/png', 'image/jpeg', 'image/webp'];

input.addEventListener('change', () => {
  for (const file of input.files) {
    if (!erlaubt.includes(file.type)) {
      console.warn(`${file.name}: Typ "${file.type || 'unbekannt'}" nicht erlaubt`);
      continue;
    }
    console.log(`${file.name} (${file.type}) wird hochgeladen`);
  }
});

urlaub.jpg (image/jpeg) wird hochgeladen notizen.xyz: Typ "unbekannt" nicht erlaubt

Typ bei slice() ändern und als Content-Type senden

const quelle = new Blob(['id;name\n1;Anna'], { type: 'text/plain' });
const csv = quelle.slice(0, quelle.size, 'text/csv');
console.log(quelle.type, '->', csv.type);

// fetch übernimmt csv.type als Content-Type-Header
const res = await fetch('/api/import', { method: 'POST', body: csv });
console.log(res.status);

text/plain -> text/csv 200

// Wichtig · Fallstricke

Keine Sicherheitsprüfung: Bei Dateien wird type in der Regel aus der Dateiendung abgeleitet. Eine umbenannte .exe mit der Endung .png meldet image/png. Prüfe den Inhalt deshalb immer auf dem Server, zum Beispiel über die Magic Bytes. Die Prüfung im Client dient nur dem Komfort.
Leerer String: Unbekannte Endungen, fehlende Angaben oder ungültige Werte führen zu "". Enthält der angegebene Typ Zeichen außerhalb von U+0020–U+007E, setzt der Konstruktor ihn stillschweigend auf "". Es wird kein Fehler geworfen.
Keine Validierung: Der Konstruktor prüft nicht, ob der String ein echter MIME-Typ ist. Auch "foo" wird übernommen, allerdings in Kleinbuchstaben.
Schreibgeschützt: Eine Zuweisung wie blob.type = 'x' hat keine Wirkung und wirft im Strict Mode einen TypeError. Einen neuen Typ bekommst du über blob.slice(0, blob.size, neuerTyp) oder new Blob([blob], { type }).
Parameter wie ;charset=utf-8 bleiben erhalten. Beim Vergleich solltest du daher z. B. type.startsWith('text/') verwenden oder den Wert vor dem ; abtrennen.
Die Eigenschaft wird in allen modernen Browsern unterstützt. In Node.js ist Blob seit Version 18 global verfügbar, davor über require('buffer').Blob.

Siehe auch

Blob Blob.size Blob.prototype.slice() new Blob() File File.name URL.createObjectURL()