Fix JXL mimetype (#970)

src/client/lazy-app/Compress/index.tsx

@@ -11,6 +11,7 @@ import {
   canDecodeImageType,
   abortable,
   assertSignal,
+  ImageMimeTypes,
 } from '../util';
 import {
   PreprocessorState,
@@ -102,7 +103,7 @@ async function decodeImage(
       if (mimeType === 'image/webp') {
         return await workerBridge.webpDecode(signal, blob);
       }
-      if (mimeType === 'image/jpegxl') {
+      if (mimeType === 'image/jxl') {
         return await workerBridge.jxlDecode(signal, blob);
       }
       if (mimeType === 'image/webp2') {
@@ -178,10 +179,13 @@ async function compressImage(
     encodeData.options as any,
   );
 
+  // This type ensures the image mimetype is consistent with our mimetype sniffer
+  const type: ImageMimeTypes = encoder.meta.mimeType;
+
   return new File(
     [compressedData],
     sourceFilename.replace(/.[^.]*$/, `.${encoder.meta.extension}`),
-    { type: encoder.meta.mimeType },
+    { type },
   );
 }
 

src/client/lazy-app/util/index.ts

@@ -137,7 +137,7 @@ export function blobToText(blob: Blob): Promise<string> {
   return new Response(blob).text();
 }
 
-const magicNumberToMimeType = new Map<RegExp, string>([
+const magicNumberMapInput = [
   [/^%PDF-/, 'application/pdf'],
   [/^GIF87a/, 'image/gif'],
   [/^GIF89a/, 'image/gif'],
@@ -150,11 +150,17 @@ const magicNumberToMimeType = new Map<RegExp, string>([
   [/^RIFF....WEBPVP8[LX ]/, 'image/webp'],
   [/^\xF4\xFF\x6F/, 'image/webp2'],
   [/^\x00\x00\x00 ftypavif\x00\x00\x00\x00/, 'image/avif'],
-  [/^\xff\x0a/, 'image/jpegxl'],
-  [/^\x00\x00\x00\x0cJXL \x0d\x0a\x87\x0a/, 'image/jpegxl'],
-]);
+  [/^\xff\x0a/, 'image/jxl'],
+  [/^\x00\x00\x00\x0cJXL \x0d\x0a\x87\x0a/, 'image/jxl'],
+] as const;
 
-export async function sniffMimeType(blob: Blob): Promise<string> {
+export type ImageMimeTypes = typeof magicNumberMapInput[number][1];
+
+const magicNumberToMimeType = new Map<RegExp, ImageMimeTypes>(
+  magicNumberMapInput,
+);
+
+export async function sniffMimeType(blob: Blob): Promise<ImageMimeTypes | ''> {
   const firstChunk = await blobToArrayBuffer(blob.slice(0, 16));
   const firstChunkString = Array.from(new Uint8Array(firstChunk))
     .map((v) => String.fromCodePoint(v))

src/features/encoders/jxl/shared/meta.ts

@@ -15,7 +15,7 @@ import type { EncodeOptions } from 'codecs/jxl/enc/jxl_enc';
 export { EncodeOptions };
 
 export const label = 'JPEG XL (beta)';
-export const mimeType = 'image/jpegxl';
+export const mimeType = 'image/jxl';
 export const extension = 'jxl';
 export const defaultOptions: EncodeOptions = {
   speed: 4,