self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-23 04:38:12 +02:00
Code Issues Releases Activity

Feature - Add upload functionality on Web (#231)

Browse Source 
* Added file selector

* Extract metadata to upload files to the web

* Added request for uploading

* Generate jpeg/Webp thumbnail for asset uploaded without thumbnail data

* Added generating thumbnail for video and WebSocket broadcast after thumbnail is generated

* Added video length extraction

* Added Uploading Panel

* Added upload progress store and styling the uploaded asset

* Added condition to only show upload panel when there is upload in progress

* Remove asset from the upload list after successfully uploading

* Added WebSocket to listen to upload event on the web

* Added mechanism to check for existing assets before uploading on the web

* Added test workflow

* Update readme
This commit is contained in:
Alex
2022-06-19 08:16:35 -05:00
committed by GitHub
parent b7603fd150
commit 1e3464fe47
33 changed files with 859 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/lib/components/shared/navigation-bar.svelte
View File

@ -2,16 +2,19 @@
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import type { ImmichUser } from '$lib/models/immich-user';
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
import { createEventDispatcher, onMount } from 'svelte';
import { fade, fly, slide } from 'svelte/transition';
import { postRequest } from '../../api';
import { serverEndpoint } from '../../constants';
import TrayArrowUp from 'svelte-material-icons/TrayArrowUp.svelte';
import { clickOutside } from './click-outside';
export let user: ImmichUser;
let shouldShowAccountInfo = false;
let shouldShowProfileImage = false;
const dispatch = createEventDispatcher();
let shouldShowAccountInfoPanel = false;
onMount(async () => {
const res = await fetch(`${serverEndpoint}/user/profile-image/${user.id}`, { method: 'GET' });
@ -41,7 +44,7 @@
</script>
<section id="dashboard-navbar" class="fixed w-screen z-[100] bg-immich-bg text-sm">
<div class="flex border place-items-center px-6 py-2 ">
<div class="flex border-b place-items-center px-6 py-2 ">
<a class="flex gap-2 place-items-center hover:cursor-pointer" href="/photos">
<img src="/immich-logo.svg" alt="immich logo" height="35" width="35" />
<h1 class="font-immich-title text-2xl text-immich-primary">IMMICH</h1>
@ -49,13 +52,21 @@
<div class="flex-1 ml-24">
<input class="w-[50%] border rounded-md bg-gray-200 px-8 py-4" placeholder="Search - Coming soon" />
</div>
<section class="flex gap-6 place-items-center">
<!-- <div>Upload</div> -->
<section class="flex gap-4 place-items-center">
{#if $page.url.pathname !== '/admin'}
<button
in:fly={{ x: 50, duration: 250 }}
on:click={() => dispatch('uploadClicked')}
class="flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 p-2 rounded-lg font-medium"
>
<TrayArrowUp size="20" />
<span> Upload </span>
</button>
{/if}
{#if user.isAdmin}
<button
class={`hover:text-immich-primary font-medium ${
class={`flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 p-2 rounded-lg font-medium ${
$page.url.pathname == '/admin' && 'text-immich-primary underline'
}`}
on:click={navigateToAdmin}>Administration</button