thm
/
upend
1
0
Fork 0
Code Issues 75 Pull Requests Packages Projects Releases 6 Wiki Activity

[ui] display image preview before upload

feat/vaults
Tomáš Mládek 2022-02-23 15:55:57 +01:00
parent 9541c397e3
commit 8f80779ce6
No known key found for this signature in database
GPG Key ID: 65E225C8B3E2ED8A
1 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
webui/src/components/AddModal.svelte
View File

@ -56,9 +56,13 @@
<div class="files"> <div class="files">
{#each files as file} {#each files as file}
<div class="file"> <div class="file">
{#if file.type.startsWith("image")}
<img src={URL.createObjectURL(file)} alt="To be uploaded." />
{:else}
<div class="icon"> <div class="icon">
<Icon name="file" /> <Icon name="file" />
</div> </div>
{/if}
<div class="label">{file.name}</div> <div class="label">{file.name}</div>
</div> </div>
{/each} {/each}
@ -121,12 +125,18 @@
.file { .file {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column;
border: 1px solid var(--foreground); border: 1px solid var(--foreground);
border-radius: 4px; border-radius: 4px;
background: var(--background-lighter); background: var(--background-lighter);
padding: 0.5em; padding: 0.5em;
img {
max-height: 12em;
max-width: 12em;
}
.icon { .icon {
font-size: 24px; font-size: 24px;
} }