helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

feat(web) Add drag n drop upload functionality (#1216)

Browse source 
* Add image drag n drop functionality

* Change upload cover name, background color and opacity
This commit is contained in:
Krisjanis Lejejs 2022-12-30 04:07:18 +02:00 • committed by GitHub
parent 6736063f83
commit 10b0924cfb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 159 additions and 177 deletions
Download patch file Download diff file Expand all files Collapse all files

48
web/src/lib/components/album-page/asset-selection.svelte
View file

@ -3,8 +3,7 @@
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import { AssetResponseDto } from '@api';
import { openFileUploadDialog, UploadType } from '$lib/utils/file-uploader';
import { albumUploadAssetStore } from '$lib/stores/album-upload-asset';
import { openFileUploadDialog } from '$lib/utils/file-uploader';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
import AssetGrid from '../photos-page/asset-grid.svelte';
import {
@ -15,50 +14,13 @@
const dispatch = createEventDispatcher();
export let albumId: string;
export let assetsInAlbum: AssetResponseDto[];
let uploadAssets: string[] = [];
let uploadAssetsCount = 9999;
onMount(() => {
$assetsInAlbumStoreState = assetsInAlbum;
albumUploadAssetStore.asset.subscribe((uploadedAsset) => {
uploadAssets = uploadedAsset;
});
albumUploadAssetStore.count.subscribe((count) => {
uploadAssetsCount = count;
});
});
/**
* Watch for the uploading event - when the uploaded assets are the same number of the chosen asset
* navigate back and add them to the album
*/
$: {
if (uploadAssets.length == uploadAssetsCount) {
// Filter assets that are already in the album
const assetIds = uploadAssets.filter(
(asset) => !!asset && !assetsInAlbum.some((a) => a.id === asset)
);
// Add the just uploaded assets to the album
if (assetIds.length) {
dispatch('asset-uploaded', {
assetIds
});
}
// Clean up states.
albumUploadAssetStore.asset.set([]);
albumUploadAssetStore.count.set(9999);
assetInteractionStore.clearMultiselect();
dispatch('go-back');
}
}
const addSelectedAssets = async () => {
dispatch('create-album', {
assets: Array.from($selectedAssets)
@ -88,7 +50,11 @@
<svelte:fragment slot="trailing">
<button
on:click={() => openFileUploadDialog(UploadType.ALBUM)}
on:click={() =>
openFileUploadDialog(albumId, () => {
assetInteractionStore.clearMultiselect();
dispatch('go-back');
})}
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