fix(web/server) uploaded asset in shared link not loaded (#1766)

* fix(web/server): Uploaded asset to shared link does not get added to the shared link/album

* remove unused code

* Add endpoints for each remove and add assets to shared link

* Update api

* Added deletion logic

* Convert callback to async/await

* Fix linter

* Fix test

* Fix server test

* added test

* Test coverage

* modify DTO

* Add notification

* fix test
This commit is contained in:
Alex 2023-02-15 15:21:22 -06:00 committed by GitHub
parent 125ec1e85f
commit b660240059
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 583 additions and 526 deletions

View file

@ -4,7 +4,7 @@
* Immich
* Immich API
*
* The version of the OpenAPI document: 1.46.1
* The version of the OpenAPI document: 1.47.2
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
@ -2083,19 +2083,6 @@ export interface UpdateAssetDto {
*/
'isFavorite'?: boolean;
}
/**
*
* @export
* @interface UpdateAssetsToSharedLinkDto
*/
export interface UpdateAssetsToSharedLinkDto {
/**
*
* @type {Array<string>}
* @memberof UpdateAssetsToSharedLinkDto
*/
'assetIds': Array<string>;
}
/**
*
* @export
@ -3588,6 +3575,45 @@ export class AlbumApi extends BaseAPI {
*/
export const AssetApiAxiosParamCreator = function (configuration?: Configuration) {
return {
/**
*
* @param {AddAssetsDto} addAssetsDto
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
addAssetsToSharedLink: async (addAssetsDto: AddAssetsDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
// verify required parameter 'addAssetsDto' is not null or undefined
assertParamExists('addAssetsToSharedLink', 'addAssetsDto', addAssetsDto)
const localVarPath = `/asset/shared-link/add`;
// use dummy base URL string because the URL constructor only accepts absolute URLs.
const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
let baseOptions;
if (configuration) {
baseOptions = configuration.baseOptions;
}
const localVarRequestOptions = { method: 'PATCH', ...baseOptions, ...options};
const localVarHeaderParameter = {} as any;
const localVarQueryParameter = {} as any;
// authentication bearer required
// http bearer authentication required
await setBearerAuthToObject(localVarHeaderParameter, configuration)
localVarHeaderParameter['Content-Type'] = 'application/json';
setSearchParams(localVarUrlObj, localVarQueryParameter);
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
localVarRequestOptions.data = serializeDataIfNeeded(addAssetsDto, localVarRequestOptions, configuration)
return {
url: toPathString(localVarUrlObj),
options: localVarRequestOptions,
};
},
/**
* Check duplicated asset before uploading - for Web upload used
* @param {CheckDuplicateAssetDto} checkDuplicateAssetDto
@ -4232,6 +4258,45 @@ export const AssetApiAxiosParamCreator = function (configuration?: Configuration
options: localVarRequestOptions,
};
},
/**
*
* @param {RemoveAssetsDto} removeAssetsDto
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
removeAssetsFromSharedLink: async (removeAssetsDto: RemoveAssetsDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
// verify required parameter 'removeAssetsDto' is not null or undefined
assertParamExists('removeAssetsFromSharedLink', 'removeAssetsDto', removeAssetsDto)
const localVarPath = `/asset/shared-link/remove`;
// use dummy base URL string because the URL constructor only accepts absolute URLs.
const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
let baseOptions;
if (configuration) {
baseOptions = configuration.baseOptions;
}
const localVarRequestOptions = { method: 'PATCH', ...baseOptions, ...options};
const localVarHeaderParameter = {} as any;
const localVarQueryParameter = {} as any;
// authentication bearer required
// http bearer authentication required
await setBearerAuthToObject(localVarHeaderParameter, configuration)
localVarHeaderParameter['Content-Type'] = 'application/json';
setSearchParams(localVarUrlObj, localVarQueryParameter);
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
localVarRequestOptions.data = serializeDataIfNeeded(removeAssetsDto, localVarRequestOptions, configuration)
return {
url: toPathString(localVarUrlObj),
options: localVarRequestOptions,
};
},
/**
*
* @param {SearchAssetDto} searchAssetDto
@ -4361,45 +4426,6 @@ export const AssetApiAxiosParamCreator = function (configuration?: Configuration
options: localVarRequestOptions,
};
},
/**
*
* @param {UpdateAssetsToSharedLinkDto} updateAssetsToSharedLinkDto
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
updateAssetsInSharedLink: async (updateAssetsToSharedLinkDto: UpdateAssetsToSharedLinkDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
// verify required parameter 'updateAssetsToSharedLinkDto' is not null or undefined
assertParamExists('updateAssetsInSharedLink', 'updateAssetsToSharedLinkDto', updateAssetsToSharedLinkDto)
const localVarPath = `/asset/shared-link`;
// use dummy base URL string because the URL constructor only accepts absolute URLs.
const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
let baseOptions;
if (configuration) {
baseOptions = configuration.baseOptions;
}
const localVarRequestOptions = { method: 'PATCH', ...baseOptions, ...options};
const localVarHeaderParameter = {} as any;
const localVarQueryParameter = {} as any;
// authentication bearer required
// http bearer authentication required
await setBearerAuthToObject(localVarHeaderParameter, configuration)
localVarHeaderParameter['Content-Type'] = 'application/json';
setSearchParams(localVarUrlObj, localVarQueryParameter);
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
localVarRequestOptions.data = serializeDataIfNeeded(updateAssetsToSharedLinkDto, localVarRequestOptions, configuration)
return {
url: toPathString(localVarUrlObj),
options: localVarRequestOptions,
};
},
/**
*
* @param {AssetTypeEnum} assetType
@ -4518,6 +4544,16 @@ export const AssetApiAxiosParamCreator = function (configuration?: Configuration
export const AssetApiFp = function(configuration?: Configuration) {
const localVarAxiosParamCreator = AssetApiAxiosParamCreator(configuration)
return {
/**
*
* @param {AddAssetsDto} addAssetsDto
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async addAssetsToSharedLink(addAssetsDto: AddAssetsDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SharedLinkResponseDto>> {
const localVarAxiosArgs = await localVarAxiosParamCreator.addAssetsToSharedLink(addAssetsDto, options);
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
},
/**
* Check duplicated asset before uploading - for Web upload used
* @param {CheckDuplicateAssetDto} checkDuplicateAssetDto
@ -4687,6 +4723,16 @@ export const AssetApiFp = function(configuration?: Configuration) {
const localVarAxiosArgs = await localVarAxiosParamCreator.getUserAssetsByDeviceId(deviceId, options);
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
},
/**
*
* @param {RemoveAssetsDto} removeAssetsDto
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async removeAssetsFromSharedLink(removeAssetsDto: RemoveAssetsDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SharedLinkResponseDto>> {
const localVarAxiosArgs = await localVarAxiosParamCreator.removeAssetsFromSharedLink(removeAssetsDto, options);
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
},
/**
*
* @param {SearchAssetDto} searchAssetDto
@ -4720,16 +4766,6 @@ export const AssetApiFp = function(configuration?: Configuration) {
const localVarAxiosArgs = await localVarAxiosParamCreator.updateAsset(assetId, updateAssetDto, options);
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
},
/**
*
* @param {UpdateAssetsToSharedLinkDto} updateAssetsToSharedLinkDto
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async updateAssetsInSharedLink(updateAssetsToSharedLinkDto: UpdateAssetsToSharedLinkDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SharedLinkResponseDto>> {
const localVarAxiosArgs = await localVarAxiosParamCreator.updateAssetsInSharedLink(updateAssetsToSharedLinkDto, options);
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
},
/**
*
* @param {AssetTypeEnum} assetType
@ -4760,6 +4796,15 @@ export const AssetApiFp = function(configuration?: Configuration) {
export const AssetApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
const localVarFp = AssetApiFp(configuration)
return {
/**
*
* @param {AddAssetsDto} addAssetsDto
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
addAssetsToSharedLink(addAssetsDto: AddAssetsDto, options?: any): AxiosPromise<SharedLinkResponseDto> {
return localVarFp.addAssetsToSharedLink(addAssetsDto, options).then((request) => request(axios, basePath));
},
/**
* Check duplicated asset before uploading - for Web upload used
* @param {CheckDuplicateAssetDto} checkDuplicateAssetDto
@ -4912,6 +4957,15 @@ export const AssetApiFactory = function (configuration?: Configuration, basePath
getUserAssetsByDeviceId(deviceId: string, options?: any): AxiosPromise<Array<string>> {
return localVarFp.getUserAssetsByDeviceId(deviceId, options).then((request) => request(axios, basePath));
},
/**
*
* @param {RemoveAssetsDto} removeAssetsDto
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
removeAssetsFromSharedLink(removeAssetsDto: RemoveAssetsDto, options?: any): AxiosPromise<SharedLinkResponseDto> {
return localVarFp.removeAssetsFromSharedLink(removeAssetsDto, options).then((request) => request(axios, basePath));
},
/**
*
* @param {SearchAssetDto} searchAssetDto
@ -4942,15 +4996,6 @@ export const AssetApiFactory = function (configuration?: Configuration, basePath
updateAsset(assetId: string, updateAssetDto: UpdateAssetDto, options?: any): AxiosPromise<AssetResponseDto> {
return localVarFp.updateAsset(assetId, updateAssetDto, options).then((request) => request(axios, basePath));
},
/**
*
* @param {UpdateAssetsToSharedLinkDto} updateAssetsToSharedLinkDto
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
updateAssetsInSharedLink(updateAssetsToSharedLinkDto: UpdateAssetsToSharedLinkDto, options?: any): AxiosPromise<SharedLinkResponseDto> {
return localVarFp.updateAssetsInSharedLink(updateAssetsToSharedLinkDto, options).then((request) => request(axios, basePath));
},
/**
*
* @param {AssetTypeEnum} assetType
@ -4980,6 +5025,17 @@ export const AssetApiFactory = function (configuration?: Configuration, basePath
* @extends {BaseAPI}
*/
export class AssetApi extends BaseAPI {
/**
*
* @param {AddAssetsDto} addAssetsDto
* @param {*} [options] Override http request option.
* @throws {RequiredError}
* @memberof AssetApi
*/
public addAssetsToSharedLink(addAssetsDto: AddAssetsDto, options?: AxiosRequestConfig) {
return AssetApiFp(this.configuration).addAssetsToSharedLink(addAssetsDto, options).then((request) => request(this.axios, this.basePath));
}
/**
* Check duplicated asset before uploading - for Web upload used
* @param {CheckDuplicateAssetDto} checkDuplicateAssetDto
@ -5166,6 +5222,17 @@ export class AssetApi extends BaseAPI {
return AssetApiFp(this.configuration).getUserAssetsByDeviceId(deviceId, options).then((request) => request(this.axios, this.basePath));
}
/**
*
* @param {RemoveAssetsDto} removeAssetsDto
* @param {*} [options] Override http request option.
* @throws {RequiredError}
* @memberof AssetApi
*/
public removeAssetsFromSharedLink(removeAssetsDto: RemoveAssetsDto, options?: AxiosRequestConfig) {
return AssetApiFp(this.configuration).removeAssetsFromSharedLink(removeAssetsDto, options).then((request) => request(this.axios, this.basePath));
}
/**
*
* @param {SearchAssetDto} searchAssetDto
@ -5202,17 +5269,6 @@ export class AssetApi extends BaseAPI {
return AssetApiFp(this.configuration).updateAsset(assetId, updateAssetDto, options).then((request) => request(this.axios, this.basePath));
}
/**
*
* @param {UpdateAssetsToSharedLinkDto} updateAssetsToSharedLinkDto
* @param {*} [options] Override http request option.
* @throws {RequiredError}
* @memberof AssetApi
*/
public updateAssetsInSharedLink(updateAssetsToSharedLinkDto: UpdateAssetsToSharedLinkDto, options?: AxiosRequestConfig) {
return AssetApiFp(this.configuration).updateAssetsInSharedLink(updateAssetsToSharedLinkDto, options).then((request) => request(this.axios, this.basePath));
}
/**
*
* @param {AssetTypeEnum} assetType

View file

@ -4,7 +4,7 @@
* Immich
* Immich API
*
* The version of the OpenAPI document: 1.46.1
* The version of the OpenAPI document: 1.47.2
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

View file

@ -4,7 +4,7 @@
* Immich
* Immich API
*
* The version of the OpenAPI document: 1.46.1
* The version of the OpenAPI document: 1.47.2
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

View file

@ -4,7 +4,7 @@
* Immich
* Immich API
*
* The version of the OpenAPI document: 1.46.1
* The version of the OpenAPI document: 1.47.2
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

View file

@ -4,7 +4,7 @@
* Immich
* Immich API
*
* The version of the OpenAPI document: 1.46.1
* The version of the OpenAPI document: 1.47.2
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

View file

@ -16,6 +16,7 @@
export let albumId: string;
export let assetsInAlbum: AssetResponseDto[];
const locale = navigator.language;
onMount(() => {
$assetsInAlbumStoreState = assetsInAlbum;
@ -28,8 +29,11 @@
assetInteractionStore.clearMultiselect();
};
const locale = navigator.language;
const handleSelectFromComputerClicked = async () => {
await openFileUploadDialog(albumId, '');
assetInteractionStore.clearMultiselect();
dispatch('go-back');
};
</script>
<section
@ -54,11 +58,7 @@
<svelte:fragment slot="trailing">
<button
on:click={() =>
openFileUploadDialog(albumId, '', () => {
assetInteractionStore.clearMultiselect();
dispatch('go-back');
})}
on:click={handleSelectFromComputerClicked}
class="text-immich-primary dark:text-immich-dark-primary text-sm hover:bg-immich-primary/10 dark:hover:bg-immich-dark-primary/25 transition-all px-6 py-2 rounded-lg font-medium"
>
Select from computer

View file

@ -13,11 +13,11 @@
import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
import ImmichLogo from '../shared-components/immich-logo.svelte';
import {
notificationController,
NotificationType
} from '../shared-components/notification/notification';
import ImmichLogo from '../shared-components/immich-logo.svelte';
export let sharedLink: SharedLinkResponseDto;
export let isOwned: boolean;
@ -43,11 +43,15 @@
);
};
const handleUploadAssets = () => {
openFileUploadDialog(undefined, sharedLink?.key, async (assetId) => {
await api.assetApi.updateAssetsInSharedLink(
const handleUploadAssets = async () => {
try {
const results = await openFileUploadDialog(undefined, sharedLink?.key);
const assetIds = results.filter((id) => !!id) as string[];
await api.assetApi.addAssetsToSharedLink(
{
assetIds: [...assets.map((a) => a.id), assetId]
assetIds
},
{
params: {
@ -57,15 +61,17 @@
);
notificationController.show({
message: 'Add asset to shared link successfully',
message: `Successfully add ${assetIds.length} to the shared link`,
type: NotificationType.Info
});
});
} catch (e) {
console.error('handleUploadAssets', e);
}
};
const handleRemoveAssetsFromSharedLink = async () => {
if (window.confirm('Do you want to remove selected assets from the shared link?')) {
await api.assetApi.updateAssetsInSharedLink(
await api.assetApi.removeAssetsFromSharedLink(
{
assetIds: assets.filter((a) => !selectedAssets.has(a)).map((a) => a.id)
},

View file

@ -6,71 +6,65 @@ import { uploadAssetsStore } from '$lib/stores/upload';
import type { UploadAsset } from '../models/upload-asset';
import { api, AssetFileUploadResponseDto } from '@api';
import { addAssetsToAlbum, getFileMimeType, getFilenameExtension } from '$lib/utils/asset-utils';
import { Subject, mergeMap } from 'rxjs';
import { mergeMap, filter, firstValueFrom, from, of, combineLatestAll } from 'rxjs';
import axios from 'axios';
export const openFileUploadDialog = (
export const openFileUploadDialog = async (
albumId: string | undefined = undefined,
sharedKey: string | undefined = undefined,
onDone?: (id: string) => void
sharedKey: string | undefined = undefined
) => {
try {
const fileSelector = document.createElement('input');
return new Promise<(string | undefined)[]>((resolve, reject) => {
try {
const fileSelector = document.createElement('input');
fileSelector.type = 'file';
fileSelector.multiple = true;
fileSelector.type = 'file';
fileSelector.multiple = true;
// When adding a content type that is unsupported by browsers, make sure
// to also add it to getFileMimeType() otherwise the upload will fail.
fileSelector.accept = 'image/*,video/*,.heic,.heif,.dng,.3gp,.nef,.srw,.raf';
// When adding a content type that is unsupported by browsers, make sure
// to also add it to getFileMimeType() otherwise the upload will fail.
fileSelector.accept = 'image/*,video/*,.heic,.heif,.dng,.3gp,.nef,.srw,.raf';
fileSelector.onchange = async (e: Event) => {
const target = e.target as HTMLInputElement;
if (!target.files) {
return;
}
const files = Array.from<File>(target.files);
fileSelector.onchange = async (e: Event) => {
const target = e.target as HTMLInputElement;
if (!target.files) {
return;
}
const files = Array.from<File>(target.files);
await fileUploadHandler(files, albumId, sharedKey, onDone);
};
resolve(await fileUploadHandler(files, albumId, sharedKey));
};
fileSelector.click();
} catch (e) {
console.log('Error selecting file', e);
}
fileSelector.click();
} catch (e) {
console.log('Error selecting file', e);
reject(e);
}
});
};
export const fileUploadHandler = async (
files: File[],
albumId: string | undefined = undefined,
sharedKey: string | undefined = undefined,
onDone?: (id: string) => void
sharedKey: string | undefined = undefined
) => {
const files$ = new Subject<File>();
files$
.pipe(
mergeMap(async (file) => {
await fileUploader(file, albumId, sharedKey, onDone);
}, 2)
return firstValueFrom(
from(files).pipe(
filter((file) => {
const assetType = getFileMimeType(file).split('/')[0];
return assetType === 'video' || assetType === 'image';
}),
mergeMap(async (file) => of(await fileUploader(file, albumId, sharedKey)), 2),
combineLatestAll()
)
.subscribe();
const acceptedFile = files.filter((file) => {
const assetType = getFileMimeType(file).split('/')[0];
return assetType === 'video' || assetType === 'image';
});
for (const file of acceptedFile) {
files$.next(file);
}
);
};
//TODO: should probably use the @api SDK
async function fileUploader(
asset: File,
albumId: string | undefined = undefined,
sharedKey: string | undefined = undefined,
onDone?: (id: string) => void
) {
console.log('uploading', asset.name);
sharedKey: string | undefined = undefined
): Promise<string | undefined> {
const mimeType = getFileMimeType(asset);
const assetType = mimeType.split('/')[0].toUpperCase();
const fileExtension = getFilenameExtension(asset.name);
@ -121,67 +115,50 @@ async function fileUploader(
}
);
if (status === 200) {
if (data.isExist) {
const dataId = data.id;
if (albumId && dataId) {
addAssetsToAlbum(albumId, [dataId], sharedKey);
}
onDone && dataId && onDone(dataId);
return;
if (status === 200 && data.isExist && data.id) {
if (albumId) {
await addAssetsToAlbum(albumId, [data.id], sharedKey);
}
return data.id;
}
const request = new XMLHttpRequest();
request.upload.onloadstart = () => {
const newUploadAsset: UploadAsset = {
id: deviceAssetId,
file: asset,
progress: 0,
fileExtension: fileExtension
};
uploadAssetsStore.addNewUploadAsset(newUploadAsset);
const newUploadAsset: UploadAsset = {
id: deviceAssetId,
file: asset,
progress: 0,
fileExtension: fileExtension
};
request.upload.onload = () => {
uploadAssetsStore.removeUploadAsset(deviceAssetId);
const res: AssetFileUploadResponseDto = JSON.parse(request.response || '{}');
if (albumId) {
try {
if (res.id) {
addAssetsToAlbum(albumId, [res.id], sharedKey);
}
} catch (e) {
console.error('ERROR parsing data JSON in upload onload');
}
uploadAssetsStore.addNewUploadAsset(newUploadAsset);
const response = await axios.post(`/api/asset/upload`, formData, {
params: {
key: sharedKey
},
onUploadProgress: (event) => {
const percentComplete = Math.floor((event.loaded / event.total) * 100);
uploadAssetsStore.updateProgress(deviceAssetId, percentComplete);
}
onDone && onDone(res.id);
};
});
// listen for `error` event
request.upload.onerror = () => {
uploadAssetsStore.removeUploadAsset(deviceAssetId);
handleUploadError(asset, request.response);
};
if (response.status == 200 || response.status == 201) {
const res: AssetFileUploadResponseDto = response.data;
// listen for `abort` event
request.upload.onabort = () => {
uploadAssetsStore.removeUploadAsset(deviceAssetId);
handleUploadError(asset, request.response);
};
if (albumId && res.id) {
await addAssetsToAlbum(albumId, [res.id], sharedKey);
}
// listen for `progress` event
request.upload.onprogress = (event) => {
const percentComplete = Math.floor((event.loaded / event.total) * 100);
uploadAssetsStore.updateProgress(deviceAssetId, percentComplete);
};
setTimeout(() => {
uploadAssetsStore.removeUploadAsset(deviceAssetId);
}, 1000);
request.open('POST', `/api/asset/upload?key=${sharedKey ?? ''}`);
request.send(formData);
return res.id;
}
} catch (e) {
console.log('error uploading file ', e);
handleUploadError(asset, JSON.stringify(e));
uploadAssetsStore.removeUploadAsset(deviceAssetId);
}
}