self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-16 03:40:33 +02:00
Code Issues Releases Activity

[WEB] Upload asset directly to album (#379)

Browse Source 
* Added stores to get album assetId

* Upload assets and add to album

* Added comments

* resolve conflict when add assets from upload directly

* Filtered out duplicate asset before adding to the album
This commit is contained in:
Alex
2022-07-26 20:53:25 -05:00
committed by GitHub
parent 2336a6159c
commit 03457f5d32
15 changed files with 3823 additions and 4408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,9 +3,58 @@ import * as exifr from 'exifr';
import { serverEndpoint } from '../constants';
import { uploadAssetsStore } from '$lib/stores/upload';
import type { UploadAsset } from '../models/upload-asset';
import { api } from '@api';
import { api, AssetFileUploadResponseDto } from '@api';
import { albumUploadAssetStore } from '$lib/stores/album-upload-asset';
export async function fileUploader(asset: File) {
/**
* Determine if the upload is for album or for the user general backup
* @variant GENERAL - Upload assets to the server for general backup
* @variant ALBUM - Upload assets to the server for backup and add to the album
*/
export enum UploadType {
/**
* Upload assets to the server
*/
GENERAL = 'GENERAL',
/**
* Upload assets to the server and add to album
*/
ALBUM = 'ALBUM'
}
export const openFileUploadDialog = (uploadType: UploadType) => {
try {
let fileSelector = document.createElement('input');
fileSelector.type = 'file';
fileSelector.multiple = true;
fileSelector.accept = 'image/*,video/*,.heic,.heif';
fileSelector.onchange = async (e: any) => {
const files = Array.from<File>(e.target.files);
const acceptedFile = files.filter(
(e) => e.type.split('/')[0] === 'video' || e.type.split('/')[0] === 'image'
);
if (uploadType === UploadType.ALBUM) {
albumUploadAssetStore.asset.set([]);
albumUploadAssetStore.count.set(acceptedFile.length);
}
for (const asset of acceptedFile) {
await fileUploader(asset, uploadType);
}
};
fileSelector.click();
} catch (e) {
console.log('Error seelcting file', e);
}
};
async function fileUploader(asset: File, uploadType: UploadType) {
const assetType = asset.type.split('/')[0].toUpperCase();
const temp = asset.name.split('.');
const fileExtension = temp[temp.length - 1];
@ -61,6 +110,11 @@ export async function fileUploader(asset: File) {
if (status === 200) {
if (data.isExist) {
if (uploadType === UploadType.ALBUM && data.id) {
albumUploadAssetStore.asset.update((a) => {
return [...a, data.id!];
});
}
return;
}
}
@ -78,12 +132,26 @@ export async function fileUploader(asset: File) {
uploadAssetsStore.addNewUploadAsset(newUploadAsset);
};
request.upload.onload = () => {
request.upload.onload = (e) => {
setTimeout(() => {
uploadAssetsStore.removeUploadAsset(deviceAssetId);
}, 1000);
};
request.onreadystatechange = () => {
try {
if (request.readyState === 4 && uploadType === UploadType.ALBUM) {
const res: AssetFileUploadResponseDto = JSON.parse(request.response);
albumUploadAssetStore.asset.update((assets) => {
return [...assets, res.id];
});
}
} catch (e) {
console.error('ERROR parsing data JSON in upload onreadystatechange');
}
};
// listen for `error` event
request.upload.onerror = () => {
uploadAssetsStore.removeUploadAsset(deviceAssetId);