mirror of
https://github.com/immich-app/immich.git
synced 2025-10-26 08:24:27 -04:00
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
This commit is contained in:
Thomas
GitHub
parent
868f629f32
commit
80d02e8a8d
@ -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"};
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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-sigma-x3f', extension: 'x3f' },
|
||||
{ mimetype: 'image/x-sony-srf', extension: 'srf' },
|
||||
{ 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-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-arw', extension: 'arw' },
|
||||
{ mimetype: 'image/x-sony-sr2', extension: 'sr2' },
|
||||
{ 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' },
|
||||
|
||||
@ -49,26 +49,75 @@ 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;
|
||||
}
|
||||
|
||||
// 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) {
|
||||
if (!req.user || (req.user.isPublicUser && !req.user.isAllowUpload)) {
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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',
|
||||
dng: 'image/dng',
|
||||
heic: 'image/heic',
|
||||
heif: 'image/heif',
|
||||
avif: 'image/avif',
|
||||
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',
|
||||
cap: 'image/x-phaseone-cap',
|
||||
cin: 'image/x-phantom-cin',
|
||||
cr2: 'image/x-canon-cr2',
|
||||
cr3: 'image/x-canon-cr3',
|
||||
erf: 'image/x-epson-erf',
|
||||
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',
|
||||
iiq: 'image/x-phaseone-iiq',
|
||||
insp: 'image/jpeg',
|
||||
insv: 'video/mp4',
|
||||
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',
|
||||
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',
|
||||
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'
|
||||
pef: 'image/x-pentax-pef',
|
||||
raf: 'image/x-fuji-raf',
|
||||
raw: 'image/x-panasonic-raw',
|
||||
rwl: 'image/x-leica-rwl',
|
||||
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)] ?? '');
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user