From 10b0924cfbd7cbdde99d94036faa192d902f6ba5 Mon Sep 17 00:00:00 2001 From: Krisjanis Lejejs Date: Fri, 30 Dec 2022 04:07:18 +0200 Subject: [PATCH] feat(web) Add drag n drop upload functionality (#1216) * Add image drag n drop functionality * Change upload cover name, background color and opacity --- web/src/app.css | 2 - web/src/app.html | 4 +- .../components/album-page/album-viewer.svelte | 21 +-- .../album-page/asset-selection.svelte | 48 +------ .../asset-viewer/asset-viewer.svelte | 21 +-- .../drag-and-drop-upload-overlay.svelte | 25 ++++ web/src/lib/stores/album-upload-asset.ts | 13 -- web/src/lib/utils/asset-utils.ts | 21 +++ web/src/lib/utils/file-uploader.ts | 130 ++++++++---------- web/src/routes/+layout.svelte | 37 ++++- web/src/routes/photos/+page.svelte | 14 +- 11 files changed, 159 insertions(+), 177 deletions(-) create mode 100644 web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte delete mode 100644 web/src/lib/stores/album-upload-asset.ts create mode 100644 web/src/lib/utils/asset-utils.ts diff --git a/web/src/app.css b/web/src/app.css index a565023d3..a683e1017 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -46,9 +46,7 @@ html::-webkit-scrollbar-thumb:hover { } body { - /* min-height: 100vh; */ margin: 0; - /* background-color: #f6f8fe; */ color: #5f6368; } diff --git a/web/src/app.html b/web/src/app.html index b5f19dfba..0381a288e 100644 --- a/web/src/app.html +++ b/web/src/app.html @@ -7,7 +7,7 @@ %sveltekit.head% - -
%sveltekit.body%
+ +
%sveltekit.body%
diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte index 84127a256..7cf48c1d2 100644 --- a/web/src/lib/components/album-page/album-viewer.svelte +++ b/web/src/lib/components/album-page/album-viewer.svelte @@ -236,25 +236,6 @@ } }; - const assetUploadedToAlbumHandler = async (event: CustomEvent) => { - const { assetIds }: { assetIds: string[] } = event.detail; - try { - const { data } = await api.albumApi.addAssetsToAlbum(album.id, { - assetIds: assetIds - }); - - if (data.album) { - album = data.album; - } - } catch (e) { - console.error('Error [assetUploadedToAlbumHandler] ', e); - notificationController.show({ - type: NotificationType.Error, - message: 'Error adding asset to album, check console for more details' - }); - } - }; - const addUserHandler = async (event: CustomEvent) => { const { selectedUsers }: { selectedUsers: UserResponseDto[] } = event.detail; @@ -591,10 +572,10 @@ {#if isShowAssetSelection} (isShowAssetSelection = false)} on:create-album={createAlbumHandler} - on:asset-uploaded={assetUploadedToAlbumHandler} /> {/if} diff --git a/web/src/lib/components/album-page/asset-selection.svelte b/web/src/lib/components/album-page/asset-selection.svelte index c44282e3f..18fb15b2a 100644 --- a/web/src/lib/components/album-page/asset-selection.svelte +++ b/web/src/lib/components/album-page/asset-selection.svelte @@ -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 @@