KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): allow uploading more file types (#1570)

Browse Source 
* feat(web): allow uploading more file types

* fix(web): make filename extension lowercase
This commit is contained in:
Michel Heusschen
2023-02-09 17:08:19 +01:00
committed by GitHub
parent 8c20d8cb3d
commit adb265794c
4 changed files with 123 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
web/src/lib/utils/asset-utils.ts
View File

@@ -111,3 +111,38 @@ export async function bulkDownload(
});
}
}
/**
* Returns the lowercase filename extension without a dot (.) and
* an empty string when not found.
*/
export function getFilenameExtension(filename: string): string {
const lastIndex = filename.lastIndexOf('.');
return filename.slice(lastIndex + 1).toLowerCase();
}
/**
* Returns the MIME type of the file and an empty string when not found.
*/
export function getFileMimeType(file: File): string {
if (file.type !== '') {
// Return the MIME type determined by the browser.
return file.type;
}
// Return MIME type based on the file extension.
switch (getFilenameExtension(file.name)) {
case 'heic':
return 'image/heic';
case 'heif':
return 'image/heif';
case 'dng':
return 'image/dng';
case '3gp':
return 'video/3gpp';
case 'nef':
return 'image/nef';
default:
return '';
}
}

24
web/src/lib/utils/file-uploader.ts
View File

@@ -7,7 +7,7 @@ import * as exifr from 'exifr';
import { uploadAssetsStore } from '$lib/stores/upload';
import type { UploadAsset } from '../models/upload-asset';
import { api, AssetFileUploadResponseDto } from '@api';
import { addAssetsToAlbum } from '$lib/utils/asset-utils';
import { addAssetsToAlbum, getFileMimeType, getFilenameExtension } from '$lib/utils/asset-utils';
export const openFileUploadDialog = (
albumId: string | undefined = undefined,
@@ -19,6 +19,9 @@ export const openFileUploadDialog = (
fileSelector.type = 'file';
fileSelector.multiple = true;
// 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,.dng,.3gp,.nef';
fileSelector.onchange = async (e: Event) => {
@@ -55,9 +58,10 @@ export const fileUploadHandler = async (
return;
}
const acceptedFile = files.filter(
(e) => e.type.split('/')[0] === 'video' || e.type.split('/')[0] === 'image'
);
const acceptedFile = files.filter((file) => {
const assetType = getFileMimeType(file).split('/')[0];
return assetType === 'video' || assetType === 'image';
});
for (const asset of acceptedFile) {
await fileUploader(asset, albumId, sharedKey, onDone);
@@ -71,9 +75,9 @@ async function fileUploader(
sharedKey: string | undefined = undefined,
onDone?: (id: string) => void
) {
const assetType = asset.type.split('/')[0].toUpperCase();
const temp = asset.name.split('.');
const fileExtension = temp[temp.length - 1];
const mimeType = getFileMimeType(asset);
const assetType = mimeType.split('/')[0].toUpperCase();
const fileExtension = getFilenameExtension(asset.name);
const formData = new FormData();
try {
@@ -114,8 +118,10 @@ async function fileUploader(
// Get asset file extension
formData.append('fileExtension', '.' + fileExtension);
// Get asset binary data.
formData.append('assetData', asset);
// Get asset binary data with a custom MIME type, because browsers will
// use application/octet-stream for unsupported MIME types, leading to
// failed uploads.
formData.append('assetData', new File([asset], asset.name, { type: mimeType }));
// Check if asset upload on server before performing upload
const { data, status } = await api.assetApi.checkDuplicateAsset(