feat: JPEG XL (#2893)

Support the JPEG XL format (.jxl).

JPEG XL is reported as supported by `sharp.format`:

```
jxl: {
  id: 'jxl',
  input: { file: true, buffer: true, stream: true, fileSuffix: [Array] },
  output: { file: true, buffer: true, stream: true }
}
```

Fixes: #2743

mobile/lib/utils/files_helper.dart

@@ -134,6 +134,9 @@ class FileHelper {
       case 'cin':
         return {"type": "image", "subType": "x-phantom-cin"};
 
+      case 'jxl':
+        return {"type": "image", "subType": "jxl"};
+
       default:
         return {"type": "unsupport", "subType": "unsupport"};
     }

server/Dockerfile

@@ -2,7 +2,7 @@ FROM node:18.16.0-alpine3.18@sha256:f41850f74ff16a33daff988e2ea06ef8f5daeb6fb849
 
 WORKDIR /usr/src/app
 
-RUN apk add --update-cache build-base imagemagick-dev python3 ffmpeg libraw-dev perl vips-dev vips-heif vips-magick
+RUN apk add --update-cache build-base imagemagick-dev python3 ffmpeg libraw-dev perl vips-dev vips-heif vips-jxl vips-magick
 
 COPY package.json package-lock.json ./
 
@@ -23,7 +23,7 @@ ENV NODE_ENV=production
 
 WORKDIR /usr/src/app
 
-RUN apk add --no-cache ffmpeg imagemagick-dev libraw-dev perl vips-dev vips-heif vips-magick
+RUN apk add --no-cache ffmpeg imagemagick-dev libraw-dev perl vips-dev vips-heif vips-jxl vips-magick
 
 COPY --from=prod /usr/src/app/node_modules ./node_modules
 COPY --from=prod /usr/src/app/dist ./dist

server/src/immich/config/asset-upload.config.spec.ts

@@ -50,47 +50,50 @@ describe('assetUploadOption', () => {
     });
 
     for (const { mimetype, extension } of [
+      { mimetype: 'image/avif', extension: 'avif' },
       { mimetype: 'image/dng', extension: 'dng' },
       { mimetype: 'image/gif', extension: 'gif' },
       { mimetype: 'image/heic', extension: 'heic' },
       { mimetype: 'image/heif', extension: 'heif' },
       { mimetype: 'image/jpeg', extension: 'jpeg' },
       { mimetype: 'image/jpeg', extension: 'jpg' },
+      { mimetype: 'image/jxl', extension: 'jxl' },
       { mimetype: 'image/png', extension: 'png' },
       { mimetype: 'image/tiff', extension: 'tiff' },
       { mimetype: 'image/webp', extension: 'webp' },
-      { mimetype: 'image/avif', extension: 'avif' },
       { mimetype: 'image/x-adobe-dng', extension: 'dng' },
-      { mimetype: 'image/x-fuji-raf', extension: 'raf' },
-      { mimetype: 'image/x-nikon-nef', extension: 'nef' },
-      { mimetype: 'image/x-samsung-srw', extension: 'srw' },
-      { mimetype: 'image/x-sony-arw', extension: 'arw' },
-      { mimetype: 'image/x-canon-crw', extension: 'crw' },
+      { mimetype: 'image/x-arriflex-ari', extension: 'ari' },
       { mimetype: 'image/x-canon-cr2', extension: 'cr2' },
       { mimetype: 'image/x-canon-cr3', extension: 'cr3' },
+      { mimetype: 'image/x-canon-crw', extension: 'crw' },
       { mimetype: 'image/x-epson-erf', extension: 'erf' },
+      { mimetype: 'image/x-fuji-raf', extension: 'raf' },
+      { mimetype: 'image/x-hasselblad-3fr', extension: '3fr' },
+      { mimetype: 'image/x-hasselblad-fff', extension: 'fff' },
       { mimetype: 'image/x-kodak-dcr', extension: 'dcr' },
       { mimetype: 'image/x-kodak-k25', extension: 'k25' },
       { mimetype: 'image/x-kodak-kdc', extension: 'kdc' },
+      { mimetype: 'image/x-leica-rwl', extension: 'rwl' },
       { mimetype: 'image/x-minolta-mrw', extension: 'mrw' },
+      { mimetype: 'image/x-nikon-nef', extension: 'nef' },
       { mimetype: 'image/x-olympus-orf', extension: 'orf' },
+      { mimetype: 'image/x-olympus-ori', extension: 'ori' },
       { mimetype: 'image/x-panasonic-raw', extension: 'raw' },
       { mimetype: 'image/x-pentax-pef', extension: 'pef' },
+      { mimetype: 'image/x-phantom-cin', extension: 'cin' },
+      { mimetype: 'image/x-phaseone-cap', extension: 'cap' },
+      { mimetype: 'image/x-phaseone-iiq', extension: 'iiq' },
+      { mimetype: 'image/x-samsung-srw', extension: 'srw' },
       { mimetype: 'image/x-sigma-x3f', extension: 'x3f' },
-      { mimetype: 'image/x-sony-srf', extension: 'srf' },
+      { mimetype: 'image/x-sony-arw', extension: 'arw' },
       { mimetype: 'image/x-sony-sr2', extension: 'sr2' },
-      { mimetype: 'image/x-hasselblad-3fr', extension: '3fr' },
-      { mimetype: 'image/x-hasselblad-fff', extension: 'fff' },
-      { mimetype: 'image/x-leica-rwl', extension: 'rwl' },
-      { mimetype: 'image/x-olympus-ori', extension: 'ori' },
-      { mimetype: 'image/x-phaseone-iiq', extension: 'iiq' },
-      { mimetype: 'image/x-arriflex-ari', extension: 'ari' },
-      { mimetype: 'image/x-phaseone-cap', extension: 'cap' },
-      { mimetype: 'image/x-phantom-cin', extension: 'cin' },
+      { mimetype: 'image/x-sony-srf', extension: 'srf' },
+      { mimetype: 'video/3gpp', extension: '3gp' },
       { mimetype: 'video/avi', extension: 'avi' },
       { mimetype: 'video/mov', extension: 'mov' },
       { mimetype: 'video/mp4', extension: 'mp4' },
       { mimetype: 'video/mpeg', extension: 'mpg' },
+      { mimetype: 'video/quicktime', extension: 'mov' },
       { mimetype: 'video/webm', extension: 'webm' },
       { mimetype: 'video/x-flv', extension: 'flv' },
       { mimetype: 'video/x-matroska', extension: 'mkv' },

server/src/immich/config/asset-upload.config.ts

@@ -49,25 +49,74 @@ export const multerUtils = { fileFilter, filename, destination };
 
 const logger = new Logger('AssetUploadConfig');
 
+const validMimeTypes = [
+  'image/avif',
+  'image/dng',
+  'image/gif',
+  'image/heic',
+  'image/heif',
+  'image/jpeg',
+  'image/jxl',
+  'image/png',
+  'image/tiff',
+  'image/webp',
+  'image/x-adobe-dng',
+  'image/x-arriflex-ari',
+  'image/x-canon-cr2',
+  'image/x-canon-cr3',
+  'image/x-canon-crw',
+  'image/x-epson-erf',
+  'image/x-fuji-raf',
+  'image/x-hasselblad-3fr',
+  'image/x-hasselblad-fff',
+  'image/x-kodak-dcr',
+  'image/x-kodak-k25',
+  'image/x-kodak-kdc',
+  'image/x-leica-rwl',
+  'image/x-minolta-mrw',
+  'image/x-nikon-nef',
+  'image/x-olympus-orf',
+  'image/x-olympus-ori',
+  'image/x-panasonic-raw',
+  'image/x-pentax-pef',
+  'image/x-phantom-cin',
+  'image/x-phaseone-cap',
+  'image/x-phaseone-iiq',
+  'image/x-samsung-srw',
+  'image/x-sigma-x3f',
+  'image/x-sony-arw',
+  'image/x-sony-sr2',
+  'image/x-sony-srf',
+  'video/3gpp',
+  'video/avi',
+  'video/mov',
+  'video/mp4',
+  'video/mpeg',
+  'video/quicktime',
+  'video/webm',
+  'video/x-flv',
+  'video/x-matroska',
+  'video/x-ms-wmv',
+  'video/x-msvideo',
+];
+
 function fileFilter(req: AuthRequest, file: any, cb: any) {
   if (!req.user || (req.user.isPublicUser && !req.user.isAllowUpload)) {
     return cb(new UnauthorizedException());
   }
-  if (
-    file.mimetype.match(
-      /\/(jpg|jpeg|png|gif|avi|mov|mp4|webm|x-msvideo|quicktime|heic|heif|avif|dng|x-adobe-dng|webp|tiff|3gpp|nef|x-nikon-nef|x-fuji-raf|x-samsung-srw|mpeg|x-flv|x-ms-wmv|x-matroska|x-sony-arw|arw|x-canon-crw|x-canon-cr2|x-canon-cr3|x-epson-erf|x-kodak-dcr|x-kodak-kdc|x-kodak-k25|x-minolta-mrw|x-olympus-orf|x-panasonic-raw|x-pentax-pef|x-sigma-x3f|x-sony-srf|x-sony-sr2|x-hasselblad-3fr|x-hasselblad-fff|x-leica-rwl|x-olympus-ori|x-phaseone-iiq|x-arriflex-ari|x-phaseone-cap|x-phantom-cin)$/,
-    )
-  ) {
+
+  if (validMimeTypes.includes(file.mimetype)) {
     cb(null, true);
-  } else {
-    // Additionally support XML but only for sidecar files
-    if (file.fieldname == 'sidecarData' && file.mimetype.match(/\/xml$/)) {
-      return cb(null, true);
-    }
-
-    logger.error(`Unsupported file type ${extname(file.originalname)} file MIME type ${file.mimetype}`);
-    cb(new BadRequestException(`Unsupported file type ${extname(file.originalname)}`), false);
+    return;
   }
+
+  // Additionally support XML but only for sidecar files.
+  if (file.fieldname === 'sidecarData' && ['application/xml', 'text/xml'].includes(file.mimetype)) {
+    return cb(null, true);
+  }
+
+  logger.error(`Unsupported file type ${extname(file.originalname)} file MIME type ${file.mimetype}`);
+  cb(new BadRequestException(`Unsupported file type ${extname(file.originalname)}`), false);
 }
 
 function destination(req: AuthRequest, file: Express.Multer.File, cb: any) {

web/src/lib/utils/asset-utils.spec.ts

@@ -61,16 +61,40 @@ describe('get asset filename', () => {
 
 describe('get file mime type', () => {
 	for (const { extension, mimeType } of [
+		{ extension: '3fr', mimeType: 'image/x-hasselblad-3fr' },
 		{ extension: '3gp', mimeType: 'video/3gpp' },
+		{ extension: 'ari', mimeType: 'image/x-arriflex-ari' },
 		{ extension: 'arw', mimeType: 'image/x-sony-arw' },
+		{ extension: 'avif', mimeType: 'image/avif' },
+		{ extension: 'cap', mimeType: 'image/x-phaseone-cap' },
+		{ extension: 'cin', mimeType: 'image/x-phantom-cin' },
+		{ extension: 'cr2', mimeType: 'image/x-canon-cr2' },
+		{ extension: 'cr3', mimeType: 'image/x-canon-cr3' },
+		{ extension: 'crw', mimeType: 'image/x-canon-crw' },
+		{ extension: 'dcr', mimeType: 'image/x-kodak-dcr' },
 		{ extension: 'dng', mimeType: 'image/dng' },
+		{ extension: 'erf', mimeType: 'image/x-epson-erf' },
+		{ extension: 'fff', mimeType: 'image/x-hasselblad-fff' },
 		{ extension: 'heic', mimeType: 'image/heic' },
 		{ extension: 'heif', mimeType: 'image/heif' },
+		{ extension: 'iiq', mimeType: 'image/x-phaseone-iiq' },
 		{ extension: 'insp', mimeType: 'image/jpeg' },
 		{ extension: 'insv', mimeType: 'video/mp4' },
+		{ extension: 'jxl', mimeType: 'image/jxl' },
+		{ extension: 'k25', mimeType: 'image/x-kodak-k25' },
+		{ extension: 'kdc', mimeType: 'image/x-kodak-kdc' },
+		{ extension: 'mrw', mimeType: 'image/x-minolta-mrw' },
 		{ extension: 'nef', mimeType: 'image/x-nikon-nef' },
+		{ extension: 'orf', mimeType: 'image/x-olympus-orf' },
+		{ extension: 'ori', mimeType: 'image/x-olympus-ori' },
+		{ extension: 'pef', mimeType: 'image/x-pentax-pef' },
 		{ extension: 'raf', mimeType: 'image/x-fuji-raf' },
-		{ extension: 'srw', mimeType: 'image/x-samsung-srw' }
+		{ extension: 'raw', mimeType: 'image/x-panasonic-raw' },
+		{ extension: 'rwl', mimeType: 'image/x-leica-rwl' },
+		{ extension: 'sr2', mimeType: 'image/x-sony-sr2' },
+		{ extension: 'srf', mimeType: 'image/x-sony-srf' },
+		{ extension: 'srw', mimeType: 'image/x-samsung-srw' },
+		{ extension: 'x3f', mimeType: 'image/x-sigma-x3f' }
 	]) {
 		it(`returns the mime type for ${extension}`, () => {
 			expect(getFileMimeType({ name: `filename.${extension}` } as File)).toEqual(mimeType);

web/src/lib/utils/asset-utils.ts

@@ -126,39 +126,40 @@ export function getAssetFilename(asset: AssetResponseDto): string {
  */
 export function getFileMimeType(file: File): string {
 	const mimeTypes: Record<string, string> = {
+		'3fr': 'image/x-hasselblad-3fr',
 		'3gp': 'video/3gpp',
+		ari: 'image/x-arriflex-ari',
 		arw: 'image/x-sony-arw',
+		avif: 'image/avif',
+		cap: 'image/x-phaseone-cap',
+		cin: 'image/x-phantom-cin',
+		cr2: 'image/x-canon-cr2',
+		cr3: 'image/x-canon-cr3',
+		crw: 'image/x-canon-crw',
+		dcr: 'image/x-kodak-dcr',
 		dng: 'image/dng',
+		erf: 'image/x-epson-erf',
+		fff: 'image/x-hasselblad-fff',
 		heic: 'image/heic',
 		heif: 'image/heif',
-		avif: 'image/avif',
+		iiq: 'image/x-phaseone-iiq',
 		insp: 'image/jpeg',
 		insv: 'video/mp4',
-		nef: 'image/x-nikon-nef',
-		raf: 'image/x-fuji-raf',
-		srw: 'image/x-samsung-srw',
-		crw: 'image/x-canon-crw',
-		cr2: 'image/x-canon-cr2',
-		cr3: 'image/x-canon-cr3',
-		erf: 'image/x-epson-erf',
-		dcr: 'image/x-kodak-dcr',
+		jxl: 'image/jxl',
 		k25: 'image/x-kodak-k25',
 		kdc: 'image/x-kodak-kdc',
 		mrw: 'image/x-minolta-mrw',
+		nef: 'image/x-nikon-nef',
 		orf: 'image/x-olympus-orf',
-		raw: 'image/x-panasonic-raw',
+		ori: 'image/x-olympus-ori',
 		pef: 'image/x-pentax-pef',
-		x3f: 'image/x-sigma-x3f',
-		srf: 'image/x-sony-srf',
-		sr2: 'image/x-sony-sr2',
-		'3fr': 'image/x-hasselblad-3fr',
-		fff: 'image/x-hasselblad-fff',
+		raf: 'image/x-fuji-raf',
+		raw: 'image/x-panasonic-raw',
 		rwl: 'image/x-leica-rwl',
-		ori: 'image/x-olympus-ori',
-		iiq: 'image/x-phaseone-iiq',
-		ari: 'image/x-arriflex-ari',
-		cap: 'image/x-phaseone-cap',
-		cin: 'image/x-phantom-cin'
+		sr2: 'image/x-sony-sr2',
+		srf: 'image/x-sony-srf',
+		srw: 'image/x-samsung-srw',
+		x3f: 'image/x-sigma-x3f'
 	};
 	// Return the MIME type determined by the browser or the MIME type based on the file extension.
 	return file.type || (mimeTypes[getFilenameExtension(file.name)] ?? '');

web/src/lib/utils/file-uploader.ts

@@ -22,8 +22,46 @@ export const openFileUploadDialog = async (
 
 			// When adding a content type that is unsupported by browsers, make sure
 			// to also add it to getFileMimeType() otherwise the upload will fail.
-			fileSelector.accept =
-				'image/*,video/*,.heic,.heif,.avif,.dng,.3gp,.nef,.srw,.crw,.cr2,.cr3,.raf,.insp,.insv,.arw,.erf,.raf,.dcr,.k25,.kdc,.mrw,.orf,.raw,.pef,.x3f,.srf,.sr2,.3fr,.fff,.rwl,.ori,.iiq,.ari,.cap,.cin,.mov';
+			fileSelector.accept = [
+				'image/*',
+				'video/*',
+				'.3fr',
+				'.3gp',
+				'.ari',
+				'.arw',
+				'.avif',
+				'.cap',
+				'.cin',
+				'.cr2',
+				'.cr3',
+				'.crw',
+				'.dcr',
+				'.dng',
+				'.erf',
+				'.fff',
+				'.heic',
+				'.heif',
+				'.iiq',
+				'.insp',
+				'.insv',
+				'.jxl',
+				'.k25',
+				'.kdc',
+				'.mov',
+				'.mrw',
+				'.nef',
+				'.orf',
+				'.ori',
+				'.pef',
+				'.raf',
+				'.raf',
+				'.raw',
+				'.rwl',
+				'.sr2',
+				'.srf',
+				'.srw',
+				'.x3f'
+			].join(',');
 
 			fileSelector.onchange = async (e: Event) => {
 				const target = e.target as HTMLInputElement;