clones/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-09-21 10:37:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web): drop axios (#7490)

Browse Source 
* 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 2024-02-29 11:22:39 -05:00 committed by GitHub
parent bb3d81bfc5
commit 09a7291527
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
37 changed files with 217 additions and 20671 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitattributes vendored
View File

@ -8,8 +8,6 @@ mobile/openapi/.openapi-generator/FILES linguist-generated=true
mobile/lib/**/*.g.dart -diff -merge
mobile/lib/**/*.g.dart linguist-generated=true
open-api/typescript-sdk/axios-client/**/* -diff -merge
open-api/typescript-sdk/axios-client/**/* linguist-generated=true
open-api/typescript-sdk/fetch-client.ts -diff -merge
open-api/typescript-sdk/fetch-client.ts linguist-generated=true

8
cli/package-lock.json generated
View File

@ -54,14 +54,6 @@
"@oazapfts/runtime": "^1.0.0",
"@types/node": "^20.11.0",
"typescript": "^5.3.3"
},
"peerDependencies": {
"axios": "^1.6.7"
},
"peerDependenciesMeta": {
"axios": {
"optional": true
}
}
},
"../server": {

8
e2e/package-lock.json generated
View File

@ -77,14 +77,6 @@
"@oazapfts/runtime": "^1.0.0",
"@types/node": "^20.11.0",
"typescript": "^5.3.3"
},
"peerDependencies": {
"axios": "^1.6.7"
},
"peerDependenciesMeta": {
"axios": {
"optional": true
}
}
},
"node_modules/@ampproject/remapping": {

7
e2e/src/web/specs/shared-link.e2e-spec.ts
View File

@ -1,18 +1,17 @@
import {
AlbumResponseDto,
AssetResponseDto,
AssetFileUploadResponseDto,
LoginResponseDto,
SharedLinkResponseDto,
SharedLinkType,
createAlbum,
createSharedLink,
} from '@immich/sdk';
import { test } from '@playwright/test';
import { apiUtils, asBearerAuth, dbUtils } from 'src/utils';
test.describe('Shared Links', () => {
let admin: LoginResponseDto;
let asset: AssetResponseDto;
let asset: AssetFileUploadResponseDto;
let album: AlbumResponseDto;
let sharedLink: SharedLinkResponseDto;
let sharedLinkPassword: SharedLinkResponseDto;
@ -53,7 +52,7 @@ test.describe('Shared Links', () => {
await page.waitForSelector('#asset-group-by-date svg');
await page.getByRole('checkbox').click();
await page.getByRole('button', { name: 'Download' }).click();
await page.getByText('DOWNLOADING').waitFor();
await page.getByText('DOWNLOADING', { exact: true }).waitFor();
});
test('enter password for a shared link', async ({ page }) => {

4
open-api/bin/generate-open-api.sh
View File

@ -17,9 +17,7 @@ function dart {
}
function typescript {
rm -rf ./typescript-sdk/client
npx --yes @openapitools/openapi-generator-cli generate -g typescript-axios -i ./immich-openapi-specs.json -o ./typescript-sdk/axios-client --additional-properties=useSingleRequestParameter=true,supportsES6=true
npx --yes oazapfts --optimistic --argumentStyle=object --useEnumType immich-openapi-specs.json typescript-sdk/fetch-client.ts
npx --yes oazapfts --optimistic --argumentStyle=object --useEnumType immich-openapi-specs.json typescript-sdk/src/fetch-client.ts
npm --prefix typescript-sdk ci && npm --prefix typescript-sdk run build
}

4
open-api/typescript-sdk/axios-client/.gitignore vendored
View File

@ -1,4 +0,0 @@
wwwroot/*.js
node_modules
typings
dist

1
open-api/typescript-sdk/axios-client/.npmignore
View File

@ -1 +0,0 @@
# empty npmignore to ensure all required files (e.g., in the dist folder) are published by npm

23
open-api/typescript-sdk/axios-client/.openapi-generator-ignore
View File

@ -1,23 +0,0 @@
# OpenAPI Generator Ignore
# Generated by openapi-generator https://github.com/openapitools/openapi-generator
# Use this file to prevent files from being overwritten by the generator.
# The patterns follow closely to .gitignore or .dockerignore.
# As an example, the C# client generator defines ApiClient.cs.
# You can make changes and tell OpenAPI Generator to ignore just this file by uncommenting the following line:
#ApiClient.cs
# You can match any string of characters against a directory, file or extension with a single asterisk (*):
#foo/*/qux
# The above matches foo/bar/qux and foo/baz/qux, but not foo/bar/baz/qux
# You can recursively match patterns against a directory, file or extension with a double asterisk (**):
#foo/**/qux
# This matches foo/bar/qux, foo/baz/qux, and foo/bar/baz/qux
# You can also negate patterns with an exclamation (!).
# For example, you can ignore all files in a docs folder with the file extension .md:
#docs/*.md
# Then explicitly reverse the ignore rule for a single file:
#!docs/README.md

8
open-api/typescript-sdk/axios-client/.openapi-generator/FILES
View File

@ -1,8 +0,0 @@
.gitignore
.npmignore
api.ts
base.ts
common.ts
configuration.ts
git_push.sh
index.ts

1
open-api/typescript-sdk/axios-client/.openapi-generator/VERSION
View File

@ -1 +0,0 @@
7.2.0

19783
open-api/typescript-sdk/axios-client/api.ts
View File

File diff suppressed because it is too large Load Diff

86
open-api/typescript-sdk/axios-client/base.ts
View File

@ -1,86 +0,0 @@
/* tslint:disable */
/* eslint-disable */
/**
* Immich
* Immich API
*
* The version of the OpenAPI document: 1.97.0
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
* https://openapi-generator.tech
* Do not edit the class manually.
*/
import type { Configuration } from './configuration';
// Some imports not used depending on template conditions
// @ts-ignore
import type { AxiosPromise, AxiosInstance, RawAxiosRequestConfig } from 'axios';
import globalAxios from 'axios';
export const BASE_PATH = "/api".replace(/\/+$/, "");
/**
*
* @export
*/
export const COLLECTION_FORMATS = {
csv: ",",
ssv: " ",
tsv: "\t",
pipes: "|",
};
/**
*
* @export
* @interface RequestArgs
*/
export interface RequestArgs {
url: string;
options: RawAxiosRequestConfig;
}
/**
*
* @export
* @class BaseAPI
*/
export class BaseAPI {
protected configuration: Configuration | undefined;
constructor(configuration?: Configuration, protected basePath: string = BASE_PATH, protected axios: AxiosInstance = globalAxios) {
if (configuration) {
this.configuration = configuration;
this.basePath = configuration.basePath ?? basePath;
}
}
};
/**
*
* @export
* @class RequiredError
* @extends {Error}
*/
export class RequiredError extends Error {
constructor(public field: string, msg?: string) {
super(msg);
this.name = "RequiredError"
}
}
interface ServerMap {
[key: string]: {
url: string,
description: string,
}[];
}
/**
*
* @export
*/
export const operationServerMap: ServerMap = {
}

150
open-api/typescript-sdk/axios-client/common.ts
View File

@ -1,150 +0,0 @@
/* tslint:disable */
/* eslint-disable */
/**
* Immich
* Immich API
*
* The version of the OpenAPI document: 1.97.0
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
* https://openapi-generator.tech
* Do not edit the class manually.
*/
import type { Configuration } from "./configuration";
import type { RequestArgs } from "./base";
import type { AxiosInstance, AxiosResponse } from 'axios';
import { RequiredError } from "./base";
/**
*
* @export
*/
export const DUMMY_BASE_URL = 'https://example.com'
/**
*
* @throws {RequiredError}
* @export
*/
export const assertParamExists = function (functionName: string, paramName: string, paramValue: unknown) {
if (paramValue === null || paramValue === undefined) {
throw new RequiredError(paramName, `Required parameter ${paramName} was null or undefined when calling ${functionName}.`);
}
}
/**
*
* @export
*/
export const setApiKeyToObject = async function (object: any, keyParamName: string, configuration?: Configuration) {
if (configuration && configuration.apiKey) {
const localVarApiKeyValue = typeof configuration.apiKey === 'function'
? await configuration.apiKey(keyParamName)
: await configuration.apiKey;
object[keyParamName] = localVarApiKeyValue;
}
}
/**
*
* @export
*/
export const setBasicAuthToObject = function (object: any, configuration?: Configuration) {
if (configuration && (configuration.username || configuration.password)) {
object["auth"] = { username: configuration.username, password: configuration.password };
}
}
/**
*
* @export
*/
export const setBearerAuthToObject = async function (object: any, configuration?: Configuration) {
if (configuration && configuration.accessToken) {
const accessToken = typeof configuration.accessToken === 'function'
? await configuration.accessToken()
: await configuration.accessToken;
object["Authorization"] = "Bearer " + accessToken;
}
}
/**
*
* @export
*/
export const setOAuthToObject = async function (object: any, name: string, scopes: string[], configuration?: Configuration) {
if (configuration && configuration.accessToken) {
const localVarAccessTokenValue = typeof configuration.accessToken === 'function'
? await configuration.accessToken(name, scopes)
: await configuration.accessToken;
object["Authorization"] = "Bearer " + localVarAccessTokenValue;
}
}
function setFlattenedQueryParams(urlSearchParams: URLSearchParams, parameter: any, key: string = ""): void {
if (parameter == null) return;
if (typeof parameter === "object") {
if (Array.isArray(parameter)) {
(parameter as any[]).forEach(item => setFlattenedQueryParams(urlSearchParams, item, key));
}
else {
Object.keys(parameter).forEach(currentKey =>
setFlattenedQueryParams(urlSearchParams, parameter[currentKey], `${key}${key !== '' ? '.' : ''}${currentKey}`)
);
}
}
else {
if (urlSearchParams.has(key)) {
urlSearchParams.append(key, parameter);
}
else {
urlSearchParams.set(key, parameter);
}
}
}
/**
*
* @export
*/
export const setSearchParams = function (url: URL, ...objects: any[]) {
const searchParams = new URLSearchParams(url.search);
setFlattenedQueryParams(searchParams, objects);
url.search = searchParams.toString();
}
/**
*
* @export
*/
export const serializeDataIfNeeded = function (value: any, requestOptions: any, configuration?: Configuration) {
const nonString = typeof value !== 'string';
const needsSerialization = nonString && configuration && configuration.isJsonMime
? configuration.isJsonMime(requestOptions.headers['Content-Type'])
: nonString;
return needsSerialization
? JSON.stringify(value !== undefined ? value : {})
: (value || "");
}
/**
*
* @export
*/
export const toPathString = function (url: URL) {
return url.pathname + url.search + url.hash
}
/**
*
* @export
*/
export const createRequestFunction = function (axiosArgs: RequestArgs, globalAxios: AxiosInstance, BASE_PATH: string, configuration?: Configuration) {
return <T = unknown, R = AxiosResponse<T>>(axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
const axiosRequestArgs = {...axiosArgs.options, url: (axios.defaults.baseURL ? '' : configuration?.basePath ?? basePath) + axiosArgs.url};
return axios.request<T, R>(axiosRequestArgs);
};
}

110
open-api/typescript-sdk/axios-client/configuration.ts
View File

@ -1,110 +0,0 @@
/* tslint:disable */
/* eslint-disable */
/**
* Immich
* Immich API
*
* The version of the OpenAPI document: 1.97.0
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
* https://openapi-generator.tech
* Do not edit the class manually.
*/
export interface ConfigurationParameters {
apiKey?: string | Promise<string> | ((name: string) => string) | ((name: string) => Promise<string>);
username?: string;
password?: string;
accessToken?: string | Promise<string> | ((name?: string, scopes?: string[]) => string) | ((name?: string, scopes?: string[]) => Promise<string>);
basePath?: string;
serverIndex?: number;
baseOptions?: any;
formDataCtor?: new () => any;
}
export class Configuration {
/**
* parameter for apiKey security
* @param name security name
* @memberof Configuration
*/
apiKey?: string | Promise<string> | ((name: string) => string) | ((name: string) => Promise<string>);
/**
* parameter for basic security
*
* @type {string}
* @memberof Configuration
*/
username?: string;
/**
* parameter for basic security
*
* @type {string}
* @memberof Configuration
*/
password?: string;
/**
* parameter for oauth2 security
* @param name security name
* @param scopes oauth2 scope
* @memberof Configuration
*/
accessToken?: string | Promise<string> | ((name?: string, scopes?: string[]) => string) | ((name?: string, scopes?: string[]) => Promise<string>);
/**
* override base path
*
* @type {string}
* @memberof Configuration
*/
basePath?: string;
/**
* override server index
*
* @type {number}
* @memberof Configuration
*/
serverIndex?: number;
/**
* base options for axios calls
*
* @type {any}
* @memberof Configuration
*/
baseOptions?: any;
/**
* The FormData constructor that will be used to create multipart form data
* requests. You can inject this here so that execution environments that
* do not support the FormData class can still run the generated client.
*
* @type {new () => FormData}
*/
formDataCtor?: new () => any;
constructor(param: ConfigurationParameters = {}) {
this.apiKey = param.apiKey;
this.username = param.username;
this.password = param.password;
this.accessToken = param.accessToken;
this.basePath = param.basePath;
this.serverIndex = param.serverIndex;
this.baseOptions = param.baseOptions;
this.formDataCtor = param.formDataCtor;
}
/**
* Check if the given MIME is a JSON MIME.
* JSON MIME examples:
* application/json
* application/json; charset=UTF8
* APPLICATION/JSON
* application/vnd.company+json
* @param mime - MIME (Multipurpose Internet Mail Extensions)
* @return True if the given MIME is JSON, false otherwise.
*/
public isJsonMime(mime: string): boolean {
const jsonMime: RegExp = new RegExp('^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$', 'i');
return mime !== null && (jsonMime.test(mime) || mime.toLowerCase() === 'application/json-patch+json');
}
}

57
open-api/typescript-sdk/axios-client/git_push.sh
View File

@ -1,57 +0,0 @@
#!/bin/sh
# ref: https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/
#
# Usage example: /bin/sh ./git_push.sh wing328 openapi-petstore-perl "minor update" "gitlab.com"
git_user_id=$1
git_repo_id=$2
release_note=$3
git_host=$4
if [ "$git_host" = "" ]; then
git_host="github.com"
echo "[INFO] No command line input provided. Set \$git_host to $git_host"
fi
if [ "$git_user_id" = "" ]; then
git_user_id="GIT_USER_ID"
echo "[INFO] No command line input provided. Set \$git_user_id to $git_user_id"
fi
if [ "$git_repo_id" = "" ]; then
git_repo_id="GIT_REPO_ID"
echo "[INFO] No command line input provided. Set \$git_repo_id to $git_repo_id"
fi
if [ "$release_note" = "" ]; then
release_note="Minor update"
echo "[INFO] No command line input provided. Set \$release_note to $release_note"
fi
# Initialize the local directory as a Git repository
git init
# Adds the files in the local repository and stages them for commit.
git add .
# Commits the tracked changes and prepares them to be pushed to a remote repository.
git commit -m "$release_note"
# Sets the new remote
git_remote=$(git remote)
if [ "$git_remote" = "" ]; then # git remote not defined
if [ "$GIT_TOKEN" = "" ]; then
echo "[INFO] \$GIT_TOKEN (environment variable) is not set. Using the git credential in your environment."
git remote add origin https://${git_host}/${git_user_id}/${git_repo_id}.git
else
git remote add origin https://${git_user_id}:"${GIT_TOKEN}"@${git_host}/${git_user_id}/${git_repo_id}.git
fi
fi
git pull origin master
# Pushes (Forces) the changes in the local repository up to the remote repository
echo "Git pushing to https://${git_host}/${git_user_id}/${git_repo_id}.git"
git push origin master 2>&1 | grep -v 'To https'

18
open-api/typescript-sdk/axios-client/index.ts
View File

@ -1,18 +0,0 @@
/* tslint:disable */
/* eslint-disable */
/**
* Immich
* Immich API
*
* The version of the OpenAPI document: 1.97.0
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
* https://openapi-generator.tech
* Do not edit the class manually.
*/
export * from "./api";
export * from "./configuration";

4
open-api/typescript-sdk/axios.ts
View File

@ -1,4 +0,0 @@
export * from './axios-client';
export * as base from './axios-client/base';
export * as configuration from './axios-client/configuration';
export * as common from './axios-client/common';

116
open-api/typescript-sdk/package-lock.json generated
View File

@ -12,14 +12,6 @@
"@oazapfts/runtime": "^1.0.0",
"@types/node": "^20.11.0",
"typescript": "^5.3.3"
},
"peerDependencies": {
"axios": "^1.6.7"
},
"peerDependenciesMeta": {
"axios": {
"optional": true
}
}
},
"node_modules/@oazapfts/runtime": {
@ -37,114 +29,6 @@
"undici-types": "~5.26.4"
}
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
"optional": true,
"peer": true
},
"node_modules/axios": {
"version": "1.6.7",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
"integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
"optional": true,
"peer": true,
"dependencies": {
"follow-redirects": "^1.15.4",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"optional": true,
"peer": true,
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"optional": true,
"peer": true,
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/follow-redirects": {
"version": "1.15.5",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
"integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"optional": true,
"peer": true,
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"optional": true,
"peer": true,
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"optional": true,
"peer": true,
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"optional": true,
"peer": true,
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
"optional": true,
"peer": true
},
"node_modules/typescript": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",

22
open-api/typescript-sdk/package.json
View File

@ -3,33 +3,21 @@
"version": "1.92.1",
"description": "",
"type": "module",
"main": "./build/fetch/index.js",
"types": "./build/fetch/index.d.ts",
"main": "./build/index.js",
"types": "./build/index.d.ts",
"exports": {
"./axios": {
"types": "./build/axios/axios.d.ts",
"default": "./build/axios/axios.js"
},
".": {
"types": "./build/fetch/fetch.d.ts",
"default": "./build/fetch/fetch.js"
"types": "./build/index.d.ts",
"default": "./build/index.js"
}
},
"scripts": {
"build": "tsc -b ./tsconfig.axios.json ./tsconfig.fetch.json"
"build": "tsc"
},
"license": "GNU Affero General Public License version 3",
"devDependencies": {
"@oazapfts/runtime": "^1.0.0",
"@types/node": "^20.11.0",
"typescript": "^5.3.3"
},
"peerDependencies": {
"axios": "^1.6.7"
},
"peerDependenciesMeta": {
"axios": {
"optional": true
}
}
}

0
open-api/typescript-sdk/fetch-client.ts → open-api/typescript-sdk/src/fetch-client.ts
View File

0
open-api/typescript-sdk/fetch-errors.ts → open-api/typescript-sdk/src/fetch-errors.ts
View File

0
open-api/typescript-sdk/fetch.ts → open-api/typescript-sdk/src/index.ts
View File

13
open-api/typescript-sdk/tsconfig.axios.json
View File

@ -1,13 +0,0 @@
{
"include": ["axios.ts", "axios-client/**/*"],
"compilerOptions": {
"target": "esnext",
"strict": true,
"skipLibCheck": true,
"declaration": true,
"outDir": "build/axios",
"module": "esnext",
"moduleResolution": "Bundler",
"lib": ["esnext"]
}
}

6
open-api/typescript-sdk/tsconfig.fetch.json → open-api/typescript-sdk/tsconfig.json
View File

@ -1,13 +1,13 @@
{
"include": ["fetch.ts", "fetch-client.ts"],
"compilerOptions": {
"target": "esnext",
"strict": true,
"skipLibCheck": true,
"declaration": true,
"outDir": "build/fetch",
"outDir": "build",
"module": "esnext",
"moduleResolution": "Bundler",
"lib": ["esnext", "dom"]
}
},
"include": ["src/**/*.ts"]
}

108
web/package-lock.json generated
View File

@ -13,7 +13,6 @@
"@mdi/js": "^7.4.47",
"@photo-sphere-viewer/core": "^5.7.1",
"@zoom-image/svelte": "^0.2.6",
"axios": "^1.6.7",
"buffer": "^6.0.3",
"copy-image-clipboard": "^2.1.2",
"dom-to-image": "^2.6.0",
@ -28,7 +27,6 @@
},
"devDependencies": {
"@faker-js/faker": "^8.4.1",
"@floating-ui/dom": "^1.6.3",
"@socket.io/component-emitter": "^3.1.0",
"@sveltejs/adapter-static": "^3.0.1",
"@sveltejs/enhanced-img": "^0.1.8",
@ -49,7 +47,6 @@
"eslint-plugin-svelte": "^2.35.1",
"eslint-plugin-unicorn": "^51.0.1",
"factory.ts": "^1.4.1",
"identity-obj-proxy": "^3.0.0",
"postcss": "^8.4.35",
"prettier": "^3.2.5",
"prettier-plugin-organize-imports": "^3.2.4",
@ -72,14 +69,6 @@
"@oazapfts/runtime": "^1.0.0",
"@types/node": "^20.11.0",
"typescript": "^5.3.3"
},
"peerDependencies": {
"axios": "^1.6.7"
},
"peerDependenciesMeta": {
"axios": {
"optional": true
}
}
},
"node_modules/@aashutoshrathi/word-wrap": {
@ -922,31 +911,6 @@
"npm": ">=6.14.13"
}
},
"node_modules/@floating-ui/core": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
"integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
"dev": true,
"dependencies": {
"@floating-ui/utils": "^0.2.1"
}
},
"node_modules/@floating-ui/dom": {
"version": "1.6.3",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
"integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
"dev": true,
"dependencies": {
"@floating-ui/core": "^1.0.0",
"@floating-ui/utils": "^0.2.0"
}
},
"node_modules/@floating-ui/utils": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==",
"dev": true
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.14",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@ -3031,7 +2995,10 @@
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
"dev": true,
"optional": true,
"peer": true
},
"node_modules/autoprefixer": {
"version": "10.4.17",
@ -3082,16 +3049,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/axios": {
"version": "1.6.7",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
"integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
"dependencies": {
"follow-redirects": "^1.15.4",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/axobject-query": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
@ -3525,6 +3482,9 @@
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dev": true,
"optional": true,
"peer": true,
"dependencies": {
"delayed-stream": "~1.0.0"
},
@ -3799,6 +3759,9 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"dev": true,
"optional": true,
"peer": true,
"engines": {
"node": ">=0.4.0"
}
@ -4655,25 +4618,6 @@
"integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
"dev": true
},
"node_modules/follow-redirects": {
"version": "1.15.5",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
"integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/for-each": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@ -4687,6 +4631,9 @@
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dev": true,
"optional": true,
"peer": true,
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
@ -4960,12 +4907,6 @@
"uglify-js": "^3.1.4"
}
},
"node_modules/harmony-reflect": {
"version": "1.6.2",
"resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
"integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==",
"dev": true
},
"node_modules/has": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@ -5126,18 +5067,6 @@
"node": ">=0.10.0"
}
},
"node_modules/identity-obj-proxy": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
"integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==",
"dev": true,
"dependencies": {
"harmony-reflect": "^1.4.6"
},
"engines": {
"node": ">=4"
}
},
"node_modules/ieee754": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@ -6193,6 +6122,9 @@
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"dev": true,
"optional": true,
"peer": true,
"engines": {
"node": ">= 0.6"
}
@ -6201,6 +6133,9 @@
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dev": true,
"optional": true,
"peer": true,
"dependencies": {
"mime-db": "1.52.0"
},
@ -7039,11 +6974,6 @@
"resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
"integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/psl": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",

3
web/package.json
View File

@ -23,7 +23,6 @@
},
"devDependencies": {
"@faker-js/faker": "^8.4.1",
"@floating-ui/dom": "^1.6.3",
"@socket.io/component-emitter": "^3.1.0",
"@sveltejs/adapter-static": "^3.0.1",
"@sveltejs/enhanced-img": "^0.1.8",
@ -44,7 +43,6 @@
"eslint-plugin-svelte": "^2.35.1",
"eslint-plugin-unicorn": "^51.0.1",
"factory.ts": "^1.4.1",
"identity-obj-proxy": "^3.0.0",
"postcss": "^8.4.35",
"prettier": "^3.2.5",
"prettier-plugin-organize-imports": "^3.2.4",
@ -64,7 +62,6 @@
"@mdi/js": "^7.4.47",
"@photo-sphere-viewer/core": "^5.7.1",
"@zoom-image/svelte": "^0.2.6",
"axios": "^1.6.7",
"buffer": "^6.0.3",
"copy-image-clipboard": "^2.1.2",
"dom-to-image": "^2.6.0",

14
web/src/lib/api/index.ts
View File

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

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

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

22
web/src/lib/components/album-page/album-card.svelte
View File

@ -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) =>

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

@ -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>

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

@ -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 {

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

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

4
web/src/lib/components/forms/login-form.svelte
View File

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

95
web/src/lib/utils.ts
View File

@ -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',

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

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

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

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

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

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