c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-01 08:31:59 +00:00
Code Releases Activity

feat(web): determine duplication of upload on client (#8825)

Browse source 
* web upload duplicate verification on client

* _

* fix formating

* chore: clean up

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
TruongSinh Tran-Nguyen 2024-05-02 14:26:13 -07:00 committed by GitHub
parent 7961d00e56
commit ec4e6a143e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 97 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
web/src/lib/stores/upload.ts
View file

@ -1,4 +1,4 @@
import { derived, writable } from 'svelte/store'; import { derived, get, writable } from 'svelte/store';
import { UploadState, type UploadAsset } from '../models/upload-asset'; import { UploadState, type UploadAsset } from '../models/upload-asset';
function createUploadStore() { function createUploadStore() {
@ -22,17 +22,23 @@ function createUploadStore() {
); );
const addNewUploadAsset = (newAsset: UploadAsset) => { const addNewUploadAsset = (newAsset: UploadAsset) => {
totalUploadCounter.update((c) => c + 1); const assets = get(uploadAssets);
uploadAssets.update((assets) => [ const duplicate = assets.find((asset) => asset.id === newAsset.id);
...assets, if (duplicate) {
{ uploadAssets.update((assets) => assets.map((asset) => (asset.id === newAsset.id ? newAsset : asset)));
...newAsset, } else {
speed: 0, totalUploadCounter.update((c) => c + 1);
state: UploadState.PENDING, uploadAssets.update((assets) => [
progress: 0, ...assets,
eta: 0, {
}, ...newAsset,
]); speed: 0,
state: UploadState.PENDING,
progress: 0,
eta: 0,
},
]);
}
}; };
const updateProgress = (id: string, loaded: number, total: number) => { const updateProgress = (id: string, loaded: number, total: number) => {

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

@ -3,7 +3,14 @@ import { uploadAssetsStore } from '$lib/stores/upload';
import { getKey, uploadRequest } from '$lib/utils'; import { getKey, uploadRequest } from '$lib/utils';
import { addAssetsToAlbum } from '$lib/utils/asset-utils'; import { addAssetsToAlbum } from '$lib/utils/asset-utils';
import { ExecutorQueue } from '$lib/utils/executor-queue'; import { ExecutorQueue } from '$lib/utils/executor-queue';
import { defaults, getSupportedMediaTypes, type AssetFileUploadResponseDto } from '@immich/sdk'; import {
Action,
checkBulkUpload,
defaults,
getSupportedMediaTypes,
type AssetFileUploadResponseDto,
} from '@immich/sdk';
import { tick } from 'svelte';
import { getServerErrorMessage, handleError } from './handle-error'; import { getServerErrorMessage, handleError } from './handle-error';
let _extensions: string[]; let _extensions: string[];
@ -70,60 +77,82 @@ async function fileUploader(asset: File, albumId: string | undefined = undefined
const fileCreatedAt = new Date(asset.lastModified).toISOString(); const fileCreatedAt = new Date(asset.lastModified).toISOString();
const deviceAssetId = getDeviceAssetId(asset); const deviceAssetId = getDeviceAssetId(asset);
return new Promise((resolve) => resolve(uploadAssetsStore.markStarted(deviceAssetId))) uploadAssetsStore.markStarted(deviceAssetId);
.then(() => {
const formData = new FormData(); try {
for (const [key, value] of Object.entries({ const formData = new FormData();
deviceAssetId, for (const [key, value] of Object.entries({
deviceId: 'WEB', deviceAssetId,
fileCreatedAt, deviceId: 'WEB',
fileModifiedAt: new Date(asset.lastModified).toISOString(), fileCreatedAt,
isFavorite: 'false', fileModifiedAt: new Date(asset.lastModified).toISOString(),
duration: '0:00:00.000000', isFavorite: 'false',
assetData: new File([asset], asset.name), duration: '0:00:00.000000',
})) { assetData: new File([asset], asset.name),
formData.append(key, value); })) {
formData.append(key, value);
}
let responseData: AssetFileUploadResponseDto | undefined;
const key = getKey();
if (crypto?.subtle?.digest && !key) {
uploadAssetsStore.updateAsset(deviceAssetId, { message: 'Hashing...' });
await tick();
try {
const bytes = await asset.arrayBuffer();
const hash = await crypto.subtle.digest('SHA-1', bytes);
const checksum = Array.from(new Uint8Array(hash))
.map((b) => b.toString(16).padStart(2, '0'))
.join('');
const {
results: [checkUploadResult],
} = await checkBulkUpload({ assetBulkUploadCheckDto: { assets: [{ id: asset.name, checksum }] } });
if (checkUploadResult.action === Action.Reject && checkUploadResult.assetId) {
responseData = { duplicate: true, id: checkUploadResult.assetId };
}
} catch (error) {
console.error(`Error calculating sha1 file=${asset.name})`, error);
} }
}
const key = getKey(); if (!responseData) {
uploadAssetsStore.updateAsset(deviceAssetId, { message: 'Uploading...' });
return uploadRequest<AssetFileUploadResponseDto>({ const response = await uploadRequest<AssetFileUploadResponseDto>({
url: defaults.baseUrl + '/asset/upload' + (key ? `?key=${key}` : ''), url: defaults.baseUrl + '/asset/upload' + (key ? `?key=${key}` : ''),
data: formData, data: formData,
onUploadProgress: (event) => uploadAssetsStore.updateProgress(deviceAssetId, event.loaded, event.total), onUploadProgress: (event) => uploadAssetsStore.updateProgress(deviceAssetId, event.loaded, event.total),
}); });
}) if (![200, 201].includes(response.status)) {
.then(async (response) => { throw new Error('Failed to upload file');
if (response.status == 200 || response.status == 201) {
const res: AssetFileUploadResponseDto = response.data;
if (res.duplicate) {
uploadAssetsStore.duplicateCounter.update((count) => count + 1);
} else {
uploadAssetsStore.successCounter.update((c) => c + 1);
}
if (albumId && res.id) {
uploadAssetsStore.updateAsset(deviceAssetId, { message: 'Adding to album...' });
await addAssetsToAlbum(albumId, [res.id]);
uploadAssetsStore.updateAsset(deviceAssetId, { message: 'Added to album' });
}
uploadAssetsStore.updateAsset(deviceAssetId, {
state: res.duplicate ? UploadState.DUPLICATED : UploadState.DONE,
});
setTimeout(() => {
uploadAssetsStore.removeUploadAsset(deviceAssetId);
}, 1000);
return res.id;
} }
}) responseData = response.data;
.catch((error) => { }
handleError(error, 'Unable to upload file'); const { duplicate, id: assetId } = responseData;
const reason = getServerErrorMessage(error) || error;
uploadAssetsStore.updateAsset(deviceAssetId, { state: UploadState.ERROR, error: reason }); if (duplicate) {
return undefined; uploadAssetsStore.duplicateCounter.update((count) => count + 1);
}); } else {
uploadAssetsStore.successCounter.update((c) => c + 1);
}
if (albumId && assetId) {
uploadAssetsStore.updateAsset(deviceAssetId, { message: 'Adding to album...' });
await addAssetsToAlbum(albumId, [assetId]);
uploadAssetsStore.updateAsset(deviceAssetId, { message: 'Added to album' });
}
uploadAssetsStore.updateAsset(deviceAssetId, { state: duplicate ? UploadState.DUPLICATED : UploadState.DONE });
setTimeout(() => {
uploadAssetsStore.removeUploadAsset(deviceAssetId);
}, 1000);
return assetId;
} catch (error) {
handleError(error, 'Unable to upload file');
const reason = getServerErrorMessage(error) || error;
uploadAssetsStore.updateAsset(deviceAssetId, { state: UploadState.ERROR, error: reason });
return;
}
} }