Bild-Uploads wirken simpel — bis die Edge Cases auftauchen.
Ich habe kürzlich ein kleines npm-Paket namens browser-image-guard veröffentlicht. Es entstand aus einem Problem, auf das ich beim Bauen von Bild-Upload-Flows immer wieder stieß.
Zuerst wirkt Bild-Upload simpel: Datei wählen, komprimieren, ans Backend senden. Doch dann kommen die Edge Cases. Dateien mit gefälschten MIME-Typen. iPhone-Nutzer laden HEIC-Bilder hoch. EXIF- und GPS-Metadaten können erhalten bleiben. Die Kompression kann im Web Worker fehlschlagen. Ältere mobile Browser können im Ladezustand hängen bleiben. Strikte CSP-Regeln können den Worker vollständig lahmlegen.
Ich hatte in einem meiner Projekte bereits eine zuverlässige Pipeline dafür gebaut, also habe ich sie in ein wiederverwendbares Paket extrahiert, statt dieselbe Logik an zwei Stellen zu pflegen.
Es übernimmt: echte Dateityp-Erkennung per Magic Bytes, HEIC/HEIF-Konvertierung, Entfernen von EXIF- und GPS-Metadaten, Skalierung und Kompression, Orientierungskorrektur, Worker-Fallback, feste Dateigrößenlimits und Dateinamen-Bereinigung.
Die API ist bewusst einfach: processImage(file). Sie liefert ein sauberes, komprimiertes, uploadfertiges JPEG oder wirft einen typisierten Fehler, der einer Meldung in der Oberfläche zugeordnet werden kann.
Originalveröffentlichung (externe Website)