409/warren
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better file previews

Browse Source
This commit is contained in:
Shawn
2025-07-13 13:33:14 +02:00
parent 596d7ac35d
commit b0628fe0bd
9 changed files with 71 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/components/actions/UploadDialog.vue
View File

@@ -216,14 +216,13 @@ async function submit() {
class="h-full w-full"
>
<div
class="flex h-full w-full flex-col items-stretch gap-1 text-left p-2"
class="flex h-full w-full flex-col items-stretch gap-2 text-left p-4"
>
<UploadListEntry
v-for="(file, i) in uploadStore.files"
:key="file.data.name"
:file="file"
:uploading="uploading"
class="flex flex-row items-center justify-between gap-4 rounded-lg border px-4 py-2"
@remove-file="() => removeFile(i)"
/>
</div>

30
frontend/components/actions/UploadListEntry.vue
View File

@@ -8,18 +8,34 @@ const { file, uploading } = defineProps<{
file: UploadFile;
uploading: boolean;
}>();
function createObjectUrl(file: File): string {
return URL.createObjectURL(file);
}
</script>
<template>
<div
class="flex flex-row items-center justify-between gap-4 rounded-lg border px-4 py-2"
class="flex border rounded-lg flex-row items-center justify-between gap-4 px-3 py-3"
>
<div class="rounded-sm border p-3">
<Icon
v-if="file.status === 'not_uploaded'"
class="h-5 w-5"
:name="getFileIcon(file.data.type)"
/>
<div
:class="[
'rounded-md border overflow-hidden w-12 h-12 min-w-12 min-h-12 items-center justify-center flex',
{ 'p-2': !file.data.type.startsWith('image/') },
]"
>
<div v-if="file.status === 'not_uploaded'" class="w-full h-full">
<img
v-if="file.data.type.startsWith('image/')"
:src="createObjectUrl(file.data)"
class="h-full w-full object-cover"
/>
<Icon
v-else
class="h-5 w-5"
:name="getFileIcon(file.data.type)"
/>
</div>
<Icon
v-else-if="file.status === 'uploading'"
class="h-5 w-5"