refactor(web): drop axios (#7490)

* refactor: downloadApi

* refactor: assetApi

* chore: drop axios

* chore: tidy up

* chore: fix exports

* fix: show notification when download starts

web/src/lib/api/index.ts

@@ -1,14 +0,0 @@
-import { AssetApi, DownloadApi, configuration } from '@immich/sdk/axios';
-
-class ImmichApi {
-  public downloadApi: DownloadApi;
-  public assetApi: AssetApi;
-
-  constructor(parameters: configuration.ConfigurationParameters) {
-    const config = new configuration.Configuration(parameters);
-    this.downloadApi = new DownloadApi(config);
-    this.assetApi = new AssetApi(config);
-  }
-}
-
-export const api = new ImmichApi({ basePath: '/api' });

web/src/lib/components/album-page/__tests__/album-card.spec.ts

@@ -1,14 +1,18 @@
 import { createObjectURLMock } from '$lib/__mocks__/jsdom-url.mock';
-import { api } from '$lib/api';
-import { ThumbnailFormat } from '@immich/sdk';
+import sdk, { ThumbnailFormat } from '@immich/sdk';
 import { albumFactory } from '@test-data';
 import '@testing-library/jest-dom';
 import { fireEvent, render, waitFor, type RenderResult } from '@testing-library/svelte';
 import type { MockedObject } from 'vitest';
 import AlbumCard from '../album-card.svelte';
 
-vi.mock('$lib/api');
-const apiMock: MockedObject<typeof api> = api as MockedObject<typeof api>;
+vi.mock('@immich/sdk', async (originalImport) => {
+  const module = await originalImport<typeof import('@immich/sdk')>();
+  const mock = { ...module, getAssetThumbnail: vi.fn() };
+  return { ...mock, default: mock };
+});
+
+const sdkMock: MockedObject<typeof sdk> = sdk as MockedObject<typeof sdk>;
 
 describe('AlbumCard component', () => {
   let sut: RenderResult<AlbumCard>;
@@ -48,7 +52,7 @@ describe('AlbumCard component', () => {
     await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));
 
     expect(albumImgElement).toHaveAttribute('alt', album.id);
-    expect(apiMock.assetApi.getAssetThumbnail).not.toHaveBeenCalled();
+    expect(sdkMock.getAssetThumbnail).not.toHaveBeenCalled();
 
     expect(albumNameElement).toHaveTextContent(album.albumName);
     expect(albumDetailsElement).toHaveTextContent(new RegExp(detailsText));
@@ -57,17 +61,7 @@ describe('AlbumCard component', () => {
   it('shows album data and loads the thumbnail image when available', async () => {
     const thumbnailFile = new File([new Blob()], 'fileThumbnail');
     const thumbnailUrl = 'blob:thumbnailUrlOne';
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //  @ts-ignore
-    // TODO: there needs to be a more robust mock of the @api to avoid mockResolvedValueOnce ts error
-    //       this is a workaround to make ts checks not fail but the test will pass as expected
-    apiMock.assetApi.getAssetThumbnail.mockResolvedValue({
-      data: thumbnailFile,
-      config: {},
-      headers: {},
-      status: 200,
-      statusText: '',
-    });
+    sdkMock.getAssetThumbnail.mockResolvedValue(thumbnailFile);
     createObjectURLMock.mockReturnValueOnce(thumbnailUrl);
 
     const album = albumFactory.build({
@@ -85,14 +79,11 @@ describe('AlbumCard component', () => {
     await waitFor(() => expect(albumImgElement).toHaveAttribute('src', thumbnailUrl));
 
     expect(albumImgElement).toHaveAttribute('alt', album.id);
-    expect(apiMock.assetApi.getAssetThumbnail).toHaveBeenCalledTimes(1);
-    expect(apiMock.assetApi.getAssetThumbnail).toHaveBeenCalledWith(
-      {
-        id: 'thumbnailIdOne',
-        format: ThumbnailFormat.Jpeg,
-      },
-      { responseType: 'blob' },
-    );
+    expect(sdkMock.getAssetThumbnail).toHaveBeenCalledTimes(1);
+    expect(sdkMock.getAssetThumbnail).toHaveBeenCalledWith({
+      id: 'thumbnailIdOne',
+      format: ThumbnailFormat.Jpeg,
+    });
     expect(createObjectURLMock).toHaveBeenCalledWith(thumbnailFile);
 
     expect(albumNameElement).toHaveTextContent('some album name');

web/src/lib/components/album-page/album-card.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-  import { api } from '$lib/api';
   import Icon from '$lib/components/elements/icon.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { user } from '$lib/stores/user.store';
   import { getAssetThumbnailUrl } from '$lib/utils';
-  import { ThumbnailFormat, getUserById, type AlbumResponseDto } from '@immich/sdk';
+  import { ThumbnailFormat, getAssetThumbnail, getUserById, type AlbumResponseDto } from '@immich/sdk';
   import { mdiDotsVertical } from '@mdi/js';
   import { createEventDispatcher, onMount } from 'svelte';
   import { getContextMenuPosition } from '../../utils/context-menu';
@@ -25,24 +24,13 @@
   const dispatchClick = createEventDispatcher<OnClick>();
   const dispatchShowContextMenu = createEventDispatcher<OnShowContextMenu>();
 
-  const loadHighQualityThumbnail = async (thubmnailId: string | null) => {
-    if (thubmnailId == undefined) {
+  const loadHighQualityThumbnail = async (assetId: string | null) => {
+    if (!assetId) {
       return;
     }
 
-    const { data } = await api.assetApi.getAssetThumbnail(
-      {
-        id: thubmnailId,
-        format: ThumbnailFormat.Jpeg,
-      },
-      {
-        responseType: 'blob',
-      },
-    );
-
-    if (data instanceof Blob) {
-      return URL.createObjectURL(data);
-    }
+    const data = await getAssetThumbnail({ id: assetId, format: ThumbnailFormat.Jpeg });
+    return URL.createObjectURL(data);
   };
 
   const showAlbumContextMenu = (e: MouseEvent) =>

web/src/lib/components/asset-viewer/panorama-viewer.svelte

@@ -1,22 +1,13 @@
 <script lang="ts">
-  import { api } from '$lib/api';
-  import { getKey } from '$lib/utils';
-  import { type AssetResponseDto } from '@immich/sdk';
+  import { serveFile, type AssetResponseDto } from '@immich/sdk';
   import { fade } from 'svelte/transition';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
 
   export let asset: AssetResponseDto;
 
   const loadAssetData = async () => {
-    const { data } = await api.assetApi.serveFile(
-      { id: asset.id, isThumb: false, isWeb: false, key: getKey() },
-      { responseType: 'blob' },
-    );
-    if (data instanceof Blob) {
-      return URL.createObjectURL(data);
-    } else {
-      throw new TypeError('Invalid data format');
-    }
+    const data = await serveFile({ id: asset.id, isWeb: false, isThumb: false });
+    return URL.createObjectURL(data);
   };
 </script>
 

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-  import { api } from '$lib/api';
   import { photoViewer } from '$lib/stores/assets.store';
   import { boundingBoxesArray } from '$lib/stores/people.store';
   import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
   import { photoZoomState } from '$lib/stores/zoom-image.store';
-  import { getKey, handlePromiseError } from '$lib/utils';
+  import { downloadRequest, getAssetFileUrl, handlePromiseError } from '$lib/utils';
   import { isWebCompatibleImage } from '$lib/utils/asset-utils';
   import { getBoundingBox } from '$lib/utils/people-utils';
   import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
@@ -51,17 +50,11 @@
       abortController?.abort();
       abortController = new AbortController();
 
-      const { data } = await api.assetApi.serveFile(
-        { id: asset.id, isThumb: false, isWeb: !loadOriginal, key: getKey() },
-        {
-          responseType: 'blob',
-          signal: abortController.signal,
-        },
-      );
-
-      if (!(data instanceof Blob)) {
-        return;
-      }
+      // TODO: Use sdk once it supports signals
+      const { data } = await downloadRequest({
+        url: getAssetFileUrl(asset.id, !loadOriginal, false),
+        signal: abortController.signal,
+      });
 
       assetData = URL.createObjectURL(data);
     } catch {

web/src/lib/components/forms/library-import-paths-form.svelte

@@ -6,7 +6,7 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import { mdiAlertOutline, mdiCheckCircleOutline, mdiPencilOutline, mdiRefresh } from '@mdi/js';
   import { validate, type LibraryResponseDto } from '@immich/sdk';
-  import type { ValidateLibraryImportPathResponseDto } from '@immich/sdk/axios';
+  import type { ValidateLibraryImportPathResponseDto } from '@immich/sdk';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
 
   export let library: LibraryResponseDto;

web/src/lib/components/forms/login-form.svelte

@@ -35,7 +35,7 @@
         return;
       } catch (error) {
         console.error('Error [login-form] [oauth.callback]', error);
-        oauthError = (await getServerErrorMessage(error)) || 'Unable to complete OAuth login';
+        oauthError = getServerErrorMessage(error) || 'Unable to complete OAuth login';
         oauthLoading = false;
       }
     }
@@ -73,7 +73,7 @@
       await onSuccess();
       return;
     } catch (error) {
-      errorMessage = (await getServerErrorMessage(error)) || 'Incorrect email or password';
+      errorMessage = getServerErrorMessage(error) || 'Incorrect email or password';
       loading = false;
       return;
     }

web/src/lib/utils.ts

@@ -13,6 +13,101 @@ import {
   type UserResponseDto,
 } from '@immich/sdk';
 
+interface DownloadRequestOptions<T = unknown> {
+  method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
+  url: string;
+  data?: T;
+  signal?: AbortSignal;
+  onDownloadProgress?: (event: ProgressEvent<XMLHttpRequestEventTarget>) => void;
+}
+
+interface UploadRequestOptions {
+  url: string;
+  data: FormData;
+  onUploadProgress?: (event: ProgressEvent<XMLHttpRequestEventTarget>) => void;
+}
+
+class AbortError extends Error {
+  name = 'AbortError';
+}
+
+class ApiError extends Error {
+  name = 'ApiError';
+
+  constructor(
+    public message: string,
+    public statusCode: number,
+    public details: string,
+  ) {
+    super(message);
+  }
+}
+
+export const uploadRequest = async <T>(options: UploadRequestOptions): Promise<{ data: T; status: number }> => {
+  const { onUploadProgress: onProgress, data, url } = options;
+
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+
+    xhr.addEventListener('error', (error) => reject(error));
+    xhr.addEventListener('load', () => {
+      if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300) {
+        resolve({ data: xhr.response as T, status: xhr.status });
+      } else {
+        reject(new ApiError(xhr.statusText, xhr.status, xhr.response));
+      }
+    });
+
+    if (onProgress) {
+      xhr.addEventListener('progress', (event) => onProgress(event));
+    }
+
+    xhr.open('POST', url);
+    xhr.responseType = 'json';
+    xhr.send(data);
+  });
+};
+
+export const downloadRequest = <TBody = unknown>(options: DownloadRequestOptions<TBody> | string) => {
+  if (typeof options === 'string') {
+    options = { url: options };
+  }
+
+  const { signal, method, url, data: body, onDownloadProgress: onProgress } = options;
+
+  return new Promise<{ data: Blob; status: number }>((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+
+    xhr.addEventListener('error', (error) => reject(error));
+    xhr.addEventListener('abort', () => reject(new AbortError()));
+    xhr.addEventListener('load', () => {
+      if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300) {
+        resolve({ data: xhr.response as Blob, status: xhr.status });
+      } else {
+        reject(new ApiError(xhr.statusText, xhr.status, xhr.responseText));
+      }
+    });
+
+    if (onProgress) {
+      xhr.addEventListener('progress', (event) => onProgress(event));
+    }
+
+    if (signal) {
+      signal.addEventListener('abort', () => xhr.abort());
+    }
+
+    xhr.open(method || 'GET', url);
+    xhr.responseType = 'blob';
+
+    if (body) {
+      xhr.setRequestHeader('Content-Type', 'application/json');
+      xhr.send(JSON.stringify(body));
+    } else {
+      xhr.send();
+    }
+  });
+};
+
 export const getJobName = (jobName: JobName) => {
   const names: Record<JobName, string> = {
     [JobName.ThumbnailGeneration]: 'Generate Thumbnails',

web/src/lib/utils/asset-utils.ts

@@ -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}`);

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

@@ -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;
     });

web/src/lib/utils/handle-error.ts

@@ -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);
+  }
 }