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

refactor(server): download assets (#3032)

Browse Source 
* refactor: download assets

* chore: open api

* chore: finish tests, make size configurable

* chore: defualt to 4GiB

* chore: open api

* fix: optional archive size

* fix: bugs

* chore: cleanup
This commit is contained in:
Jason Rasmussen
2023-06-30 12:24:28 -04:00
committed by GitHub
parent df9c05bef3
commit ad343b7b32
53 changed files with 1455 additions and 1403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
web/src/lib/components/album-page/album-viewer.svelte
View File

@@ -3,7 +3,6 @@
import { afterNavigate, goto } from '$app/navigation';
import { albumAssetSelectionStore } from '$lib/stores/album-asset-selection.store';
import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
import { downloadAssets } from '$lib/stores/download';
import { locale } from '$lib/stores/preferences.store';
import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
import {
@@ -45,6 +44,7 @@
import ThumbnailSelection from './thumbnail-selection.svelte';
import UserSelectionModal from './user-selection-modal.svelte';
import { handleError } from '../../utils/handle-error';
import { downloadArchive } from '../../utils/asset-utils';
export let album: AlbumResponseDto;
export let sharedLink: SharedLinkResponseDto | undefined = undefined;
@@ -242,78 +242,12 @@
};
const downloadAlbum = async () => {
try {
let skip = 0;
let count = 0;
let done = false;
while (!done) {
count++;
const fileName = album.albumName + `${count === 1 ? '' : count}.zip`;
$downloadAssets[fileName] = 0;
let total = 0;
const { data, status, headers } = await api.albumApi.downloadArchive(
{ id: album.id, skip: skip || undefined, key: sharedLink?.key },
{
responseType: 'blob',
onDownloadProgress: function (progressEvent) {
const request = this as XMLHttpRequest;
if (!total) {
total = Number(request.getResponseHeader('X-Immich-Content-Length-Hint')) || 0;
}
if (total) {
const current = progressEvent.loaded;
$downloadAssets[fileName] = Math.floor((current / total) * 100);
}
}
}
);
const isNotComplete = headers['x-immich-archive-complete'] === 'false';
const fileCount = Number(headers['x-immich-archive-file-count']) || 0;
if (isNotComplete && fileCount > 0) {
skip += fileCount;
} else {
done = true;
}
if (!(data instanceof Blob)) {
return;
}
if (status === 200) {
const fileUrl = URL.createObjectURL(data);
const anchor = document.createElement('a');
anchor.href = fileUrl;
anchor.download = fileName;
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
URL.revokeObjectURL(fileUrl);
// Remove item from download list
setTimeout(() => {
const copy = $downloadAssets;
delete copy[fileName];
$downloadAssets = copy;
}, 2000);
}
}
} catch (e) {
$downloadAssets = {};
console.error('Error downloading file ', e);
notificationController.show({
type: NotificationType.Error,
message: 'Error downloading file, check console for more details.'
});
}
await downloadArchive(
`${album.albumName}.zip`,
{ albumId: album.id },
undefined,
sharedLink?.key
);
};
const showAlbumOptionsMenu = ({ x, y }: MouseEvent) => {
@@ -360,7 +294,7 @@
>
<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
{#if sharedLink?.allowDownload || !isPublicShared}
<DownloadAction filename={album.albumName} sharedLinkKey={sharedLink?.key} />
<DownloadAction filename="{album.albumName}.zip" sharedLinkKey={sharedLink?.key} />
{/if}
{#if isOwned}
<RemoveFromAlbum bind:album />

74
web/src/lib/components/asset-viewer/asset-viewer.svelte
View File

@@ -1,6 +1,5 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { downloadAssets } from '$lib/stores/download';
import {
AlbumResponseDto,
api,
@@ -25,7 +24,7 @@
import { assetStore } from '$lib/stores/assets.store';
import { isShowDetail } from '$lib/stores/preferences.store';
import { addAssetsToAlbum, getFilenameExtension } from '$lib/utils/asset-utils';
import { addAssetsToAlbum, downloadFile } from '$lib/utils/asset-utils';
import { browser } from '$app/environment';
export let asset: AssetResponseDto;
@@ -115,75 +114,6 @@
$isShowDetail = !$isShowDetail;
};
const handleDownload = () => {
if (asset.livePhotoVideoId) {
downloadFile(asset.livePhotoVideoId, true, publicSharedKey);
downloadFile(asset.id, false, publicSharedKey);
return;
}
downloadFile(asset.id, false, publicSharedKey);
};
const downloadFile = async (assetId: string, isLivePhoto: boolean, key: string) => {
try {
const imageExtension = isLivePhoto ? 'mov' : getFilenameExtension(asset.originalPath);
const imageFileName = asset.originalFileName + '.' + imageExtension;
// If assets is already download -> return;
if ($downloadAssets[imageFileName]) {
return;
}
$downloadAssets[imageFileName] = 0;
const { data, status } = await api.assetApi.downloadFile(
{ id: assetId, key },
{
responseType: 'blob',
onDownloadProgress: (progressEvent) => {
if (progressEvent.lengthComputable) {
const total = progressEvent.total;
const current = progressEvent.loaded;
$downloadAssets[imageFileName] = Math.floor((current / total) * 100);
}
}
}
);
if (!(data instanceof Blob)) {
return;
}
if (status === 200) {
const fileUrl = URL.createObjectURL(data);
const anchor = document.createElement('a');
anchor.href = fileUrl;
anchor.download = imageFileName;
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
URL.revokeObjectURL(fileUrl);
// Remove item from download list
setTimeout(() => {
const copy = $downloadAssets;
delete copy[imageFileName];
$downloadAssets = copy;
}, 2000);
}
} catch (e) {
$downloadAssets = {};
console.error('Error downloading file ', e);
notificationController.show({
type: NotificationType.Error,
message: 'Error downloading file, check console for more details.'
});
}
};
const deleteAsset = async () => {
try {
if (
@@ -313,7 +243,7 @@
showDownloadButton={shouldShowDownloadButton}
on:goBack={closeViewer}
on:showDetail={showDetailInfoHandler}
on:download={handleDownload}
on:download={() => downloadFile(asset, publicSharedKey)}
on:delete={deleteAsset}
on:favorite={toggleFavorite}
on:addToAlbum={() => openAlbumPicker(false)}

18
web/src/lib/components/photos-page/actions/download-action.svelte
View File

@@ -1,18 +1,30 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { bulkDownload } from '$lib/utils/asset-utils';
import { downloadArchive, downloadFile } from '$lib/utils/asset-utils';
import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
export let filename = 'immich';
export let filename = 'immich.zip';
export let sharedLinkKey: string | undefined = undefined;
export let menuItem = false;
const { getAssets, clearSelect } = getAssetControlContext();
const handleDownloadFiles = async () => {
await bulkDownload(filename, Array.from(getAssets()), clearSelect, sharedLinkKey);
const assets = Array.from(getAssets());
if (assets.length === 1) {
await downloadFile(assets[0], sharedLinkKey);
clearSelect();
return;
}
await downloadArchive(
filename,
{ assetIds: assets.map((asset) => asset.id) },
clearSelect,
sharedLinkKey
);
};
</script>

11
web/src/lib/components/share-page/individual-shared-viewer.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { bulkDownload } from '$lib/utils/asset-utils';
import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
import { downloadArchive } from '$lib/utils/asset-utils';
import { api, AssetResponseDto, SharedLinkResponseDto } from '@api';
import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
@@ -38,7 +38,12 @@
});
const downloadAssets = async () => {
await bulkDownload('immich-shared', assets, undefined, sharedLink.key);
await downloadArchive(
`immich-shared.zip`,
{ assetIds: assets.map((asset) => asset.id) },
undefined,
sharedLink.key
);
};
const handleUploadAssets = async (files: File[] = []) => {
@@ -78,7 +83,7 @@
<AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
{#if sharedLink?.allowDownload}
<DownloadAction filename="immich-shared" sharedLinkKey={sharedLink.key} />
<DownloadAction filename="immich-shared.zip" sharedLinkKey={sharedLink.key} />
{/if}
{#if isOwned}
<RemoveFromSharedLink bind:sharedLink />

15
web/src/lib/stores/download.ts
View File

@@ -9,3 +9,18 @@ export const isDownloading = derived(downloadAssets, ($downloadAssets) => {
return true;
});
const update = (key: string, value: number | null) => {
downloadAssets.update((state) => {
const newState = { ...state };
if (value === null) {
delete newState[key];
} else {
newState[key] = value;
}
return newState;
});
};
export const clearDownload = (key: string) => update(key, null);
export const updateDownload = (key: string, value: number) => update(key, value);

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

@@ -1,9 +1,16 @@
import { api, AddAssetsResponseDto, AssetResponseDto } from '@api';
import {
notificationController,
NotificationType
} from '$lib/components/shared-components/notification/notification';
import { downloadAssets } from '$lib/stores/download';
import { clearDownload, updateDownload } from '$lib/stores/download';
import {
AddAssetsResponseDto,
api,
AssetApiGetDownloadInfoRequest,
AssetResponseDto,
DownloadResponseDto
} from '@api';
import { handleError } from './handle-error';
export const addAssetsToAlbum = async (
albumId: string,
@@ -24,84 +31,104 @@ export const addAssetsToAlbum = async (
return dto;
});
export async function bulkDownload(
const downloadBlob = (data: Blob, filename: string) => {
const url = URL.createObjectURL(data);
const anchor = document.createElement('a');
anchor.href = url;
anchor.download = filename;
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
URL.revokeObjectURL(url);
};
export const downloadArchive = async (
fileName: string,
assets: AssetResponseDto[],
options: Omit<AssetApiGetDownloadInfoRequest, 'key'>,
onDone?: () => void,
key?: string
) {
const assetIds = assets.map((asset) => asset.id);
) => {
let downloadInfo: DownloadResponseDto | null = null;
try {
// let skip = 0;
let count = 0;
let done = false;
const { data } = await api.assetApi.getDownloadInfo({ ...options, key });
downloadInfo = data;
} catch (error) {
handleError(error, 'Unable to download files');
return;
}
while (!done) {
count++;
// TODO: prompt for big download
// const total = downloadInfo.totalSize;
const downloadFileName = fileName + `${count === 1 ? '' : count}.zip`;
downloadAssets.set({ [downloadFileName]: 0 });
for (let i = 0; i < downloadInfo.archives.length; i++) {
const archive = downloadInfo.archives[i];
const suffix = downloadInfo.archives.length === 1 ? '' : `+${i + 1}`;
const archiveName = fileName.replace('.zip', `${suffix}.zip`);
let total = 0;
let downloadKey = `${archiveName}`;
if (downloadInfo.archives.length > 1) {
downloadKey = `${archiveName} (${i + 1}/${downloadInfo.archives.length})`;
}
const { data, status, headers } = await api.assetApi.downloadFiles(
{ downloadFilesDto: { assetIds }, key },
updateDownload(downloadKey, 0);
try {
const { data } = await api.assetApi.downloadArchive(
{ assetIdsDto: { assetIds: archive.assetIds }, key },
{
responseType: 'blob',
onDownloadProgress: function (progressEvent) {
const request = this as XMLHttpRequest;
if (!total) {
total = Number(request.getResponseHeader('X-Immich-Content-Length-Hint')) || 0;
}
onDownloadProgress: (event) =>
updateDownload(downloadKey, Math.floor((event.loaded / archive.size) * 100))
}
);
if (total) {
const current = progressEvent.loaded;
downloadAssets.set({ [downloadFileName]: Math.floor((current / total) * 100) });
downloadBlob(data, archiveName);
} catch (e) {
handleError(e, 'Unable to download files');
clearDownload(downloadKey);
return;
} finally {
setTimeout(() => clearDownload(downloadKey), 3_000);
}
}
onDone?.();
};
export const downloadFile = async (asset: AssetResponseDto, key?: string) => {
const filenames = [`${asset.originalFileName}.${getFilenameExtension(asset.originalPath)}`];
if (asset.livePhotoVideoId) {
filenames.push(`${asset.originalFileName}.mov`);
}
for (const filename of filenames) {
try {
updateDownload(filename, 0);
const { data } = await api.assetApi.downloadFile(
{ id: asset.id, key },
{
responseType: 'blob',
onDownloadProgress: (event: ProgressEvent) => {
if (event.lengthComputable) {
updateDownload(filename, Math.floor((event.loaded / event.total) * 100));
}
}
}
);
const isNotComplete = headers['x-immich-archive-complete'] === 'false';
const fileCount = Number(headers['x-immich-archive-file-count']) || 0;
if (isNotComplete && fileCount > 0) {
// skip += fileCount;
} else {
onDone?.();
done = true;
}
if (!(data instanceof Blob)) {
return;
}
if (status === 201) {
const fileUrl = URL.createObjectURL(data);
const anchor = document.createElement('a');
anchor.href = fileUrl;
anchor.download = downloadFileName;
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
URL.revokeObjectURL(fileUrl);
// Remove item from download list
setTimeout(() => {
downloadAssets.set({});
}, 2000);
}
downloadBlob(data, filename);
} catch (e) {
handleError(e, `Error downloading ${filename}`);
} finally {
setTimeout(() => clearDownload(filename), 3_000);
}
} catch (e) {
console.error('Error downloading file ', e);
notificationController.show({
type: NotificationType.Error,
message: 'Error downloading file, check console for more details.'
});
}
}
};
/**
* Returns the lowercase filename extension without a dot (.) and

14
web/src/lib/utils/handle-error.ts
View File

@@ -4,10 +4,20 @@ import {
NotificationType
} from '../components/shared-components/notification/notification';
export function handleError(error: unknown, message: string) {
export async function handleError(error: unknown, message: string) {
console.error(`[handleError]: ${message}`, error);
let serverMessage = (error as ApiError)?.response?.data?.message;
let data = (error as ApiError)?.response?.data;
if (data instanceof Blob) {
const response = await data.text();
try {
data = JSON.parse(response);
} catch {
data = { message: response };
}
}
let serverMessage = data?.message;
if (serverMessage) {
serverMessage = `${String(serverMessage).slice(0, 75)}\n(Immich Server Error)`;
}