mirror of
https://github.com/immich-app/immich
synced 2025-11-14 17:36:12 +00:00
refactor(web): drop axios (#7490)
* refactor: downloadApi * refactor: assetApi * chore: drop axios * chore: tidy up * chore: fix exports * fix: show notification when download starts
This commit is contained in:
Jason Rasmussen
GitHub
parent
bb3d81bfc5
commit
09a7291527
37 changed files with 217 additions and 20671 deletions
|
|
@ -1,8 +1,9 @@
|
|||
import { api } from '$lib/api';
|
||||
import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
|
||||
import { downloadManager } from '$lib/stores/download';
|
||||
import { downloadRequest, getKey } from '$lib/utils';
|
||||
import {
|
||||
addAssetsToAlbum as addAssets,
|
||||
defaults,
|
||||
getDownloadInfo,
|
||||
type AssetResponseDto,
|
||||
type AssetTypeEnum,
|
||||
|
|
@ -12,7 +13,6 @@ import {
|
|||
type UserResponseDto,
|
||||
} from '@immich/sdk';
|
||||
import { DateTime } from 'luxon';
|
||||
import { getKey } from '../utils';
|
||||
import { handleError } from './handle-error';
|
||||
|
||||
export const addAssetsToAlbum = async (albumId: string, assetIds: Array<string>): Promise<BulkIdResponseDto[]> =>
|
||||
|
|
@ -61,6 +61,7 @@ export const downloadArchive = async (fileName: string, options: DownloadInfoDto
|
|||
const archive = downloadInfo.archives[index];
|
||||
const suffix = downloadInfo.archives.length === 1 ? '' : `+${index + 1}`;
|
||||
const archiveName = fileName.replace('.zip', `${suffix}-${DateTime.now().toFormat('yyyy-LL-dd-HH-mm-ss')}.zip`);
|
||||
const key = getKey();
|
||||
|
||||
let downloadKey = `${archiveName} `;
|
||||
if (downloadInfo.archives.length > 1) {
|
||||
|
|
@ -71,14 +72,14 @@ export const downloadArchive = async (fileName: string, options: DownloadInfoDto
|
|||
downloadManager.add(downloadKey, archive.size, abort);
|
||||
|
||||
try {
|
||||
const { data } = await api.downloadApi.downloadArchive(
|
||||
{ assetIdsDto: { assetIds: archive.assetIds }, key: getKey() },
|
||||
{
|
||||
responseType: 'blob',
|
||||
signal: abort.signal,
|
||||
onDownloadProgress: (event) => downloadManager.update(downloadKey, event.loaded),
|
||||
},
|
||||
);
|
||||
// TODO use sdk once it supports progress events
|
||||
const { data } = await downloadRequest({
|
||||
method: 'POST',
|
||||
url: defaults.baseUrl + '/download/archive' + (key ? `?key=${key}` : ''),
|
||||
data: { assetIds: archive.assetIds },
|
||||
signal: abort.signal,
|
||||
onDownloadProgress: (event) => downloadManager.update(downloadKey, event.loaded),
|
||||
});
|
||||
|
||||
downloadBlob(data, archiveName);
|
||||
} catch (error) {
|
||||
|
|
@ -120,25 +121,21 @@ export const downloadFile = async (asset: AssetResponseDto) => {
|
|||
try {
|
||||
const abort = new AbortController();
|
||||
downloadManager.add(downloadKey, size, abort);
|
||||
|
||||
const { data } = await api.downloadApi.downloadFile(
|
||||
{ id, key: getKey() },
|
||||
{
|
||||
responseType: 'blob',
|
||||
onDownloadProgress: ({ event }) => {
|
||||
if (event.lengthComputable) {
|
||||
downloadManager.update(downloadKey, event.loaded, event.total);
|
||||
}
|
||||
},
|
||||
signal: abort.signal,
|
||||
},
|
||||
);
|
||||
const key = getKey();
|
||||
|
||||
notificationController.show({
|
||||
type: NotificationType.Info,
|
||||
message: `Downloading asset ${asset.originalFileName}`,
|
||||
});
|
||||
|
||||
// TODO use sdk once it supports progress events
|
||||
const { data } = await downloadRequest({
|
||||
method: 'POST',
|
||||
url: defaults.baseUrl + `/download/asset/${id}` + (key ? `?key=${key}` : ''),
|
||||
signal: abort.signal,
|
||||
onDownloadProgress: (event) => downloadManager.update(downloadKey, event.loaded, event.total),
|
||||
});
|
||||
|
||||
downloadBlob(data, filename);
|
||||
} catch (error) {
|
||||
handleError(error, `Error downloading ${filename}`);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
import { api } from '$lib/api';
|
||||
import { UploadState } from '$lib/models/upload-asset';
|
||||
import { uploadAssetsStore } from '$lib/stores/upload';
|
||||
import { getKey } from '$lib/utils';
|
||||
import { getKey, uploadRequest } from '$lib/utils';
|
||||
import { addAssetsToAlbum } from '$lib/utils/asset-utils';
|
||||
import { ExecutorQueue } from '$lib/utils/executor-queue';
|
||||
import { getSupportedMediaTypes, type AssetFileUploadResponseDto } from '@immich/sdk';
|
||||
import { defaults, getSupportedMediaTypes, type AssetFileUploadResponseDto } from '@immich/sdk';
|
||||
import { getServerErrorMessage, handleError } from './handle-error';
|
||||
|
||||
let _extensions: string[];
|
||||
|
|
@ -72,26 +71,28 @@ async function fileUploader(asset: File, albumId: string | undefined = undefined
|
|||
const deviceAssetId = getDeviceAssetId(asset);
|
||||
|
||||
return new Promise((resolve) => resolve(uploadAssetsStore.markStarted(deviceAssetId)))
|
||||
.then(() =>
|
||||
api.assetApi.uploadFile(
|
||||
{
|
||||
deviceAssetId,
|
||||
deviceId: 'WEB',
|
||||
fileCreatedAt,
|
||||
fileModifiedAt: new Date(asset.lastModified).toISOString(),
|
||||
isFavorite: false,
|
||||
duration: '0:00:00.000000',
|
||||
assetData: new File([asset], asset.name),
|
||||
key: getKey(),
|
||||
},
|
||||
{
|
||||
onUploadProgress: ({ event }) => {
|
||||
const { loaded, total } = event;
|
||||
uploadAssetsStore.updateProgress(deviceAssetId, loaded, total);
|
||||
},
|
||||
},
|
||||
),
|
||||
)
|
||||
.then(() => {
|
||||
const formData = new FormData();
|
||||
for (const [key, value] of Object.entries({
|
||||
deviceAssetId,
|
||||
deviceId: 'WEB',
|
||||
fileCreatedAt,
|
||||
fileModifiedAt: new Date(asset.lastModified).toISOString(),
|
||||
isFavorite: 'false',
|
||||
duration: '0:00:00.000000',
|
||||
assetData: new File([asset], asset.name),
|
||||
})) {
|
||||
formData.append(key, value);
|
||||
}
|
||||
|
||||
const key = getKey();
|
||||
|
||||
return uploadRequest<AssetFileUploadResponseDto>({
|
||||
url: defaults.baseUrl + '/asset/upload' + (key ? `?key=${key}` : ''),
|
||||
data: formData,
|
||||
onUploadProgress: (event) => uploadAssetsStore.updateProgress(deviceAssetId, event.loaded, event.total),
|
||||
});
|
||||
})
|
||||
.then(async (response) => {
|
||||
if (response.status == 200 || response.status == 201) {
|
||||
const res: AssetFileUploadResponseDto = response.data;
|
||||
|
|
@ -118,9 +119,9 @@ async function fileUploader(asset: File, albumId: string | undefined = undefined
|
|||
return res.id;
|
||||
}
|
||||
})
|
||||
.catch(async (error) => {
|
||||
.catch((error) => {
|
||||
handleError(error, 'Unable to upload file');
|
||||
const reason = (await getServerErrorMessage(error)) || error;
|
||||
const reason = getServerErrorMessage(error) || error;
|
||||
uploadAssetsStore.updateAsset(deviceAssetId, { state: UploadState.ERROR, error: reason });
|
||||
return undefined;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,24 +1,9 @@
|
|||
import { isHttpError } from '@immich/sdk';
|
||||
import { isAxiosError } from 'axios';
|
||||
import { notificationController, NotificationType } from '../components/shared-components/notification/notification';
|
||||
|
||||
export async function getServerErrorMessage(error: unknown) {
|
||||
export function getServerErrorMessage(error: unknown) {
|
||||
if (isHttpError(error)) {
|
||||
return error.data?.message || error.data;
|
||||
}
|
||||
|
||||
if (isAxiosError(error)) {
|
||||
let data = error.response?.data;
|
||||
if (data instanceof Blob) {
|
||||
const response = await data.text();
|
||||
try {
|
||||
data = JSON.parse(response);
|
||||
} catch {
|
||||
data = { message: response };
|
||||
}
|
||||
}
|
||||
|
||||
return data?.message;
|
||||
return error.data?.message || error.message;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -29,18 +14,17 @@ export function handleError(error: unknown, message: string) {
|
|||
|
||||
console.error(`[handleError]: ${message}`, error, (error as Error)?.stack);
|
||||
|
||||
getServerErrorMessage(error)
|
||||
.then((serverMessage) => {
|
||||
if (serverMessage) {
|
||||
serverMessage = `${String(serverMessage).slice(0, 75)}\n(Immich Server Error)`;
|
||||
}
|
||||
try {
|
||||
let serverMessage = getServerErrorMessage(error);
|
||||
if (serverMessage) {
|
||||
serverMessage = `${String(serverMessage).slice(0, 75)}\n(Immich Server Error)`;
|
||||
}
|
||||
|
||||
notificationController.show({
|
||||
message: serverMessage || message,
|
||||
type: NotificationType.Error,
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
notificationController.show({
|
||||
message: serverMessage || message,
|
||||
type: NotificationType.Error,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue