zoeissleeping/veridian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve file upload and diplay stuff

Browse Source
This commit is contained in:
Zoe
2026-03-02 00:12:01 -06:00
parent c84f982277
commit 71985c325b
4 changed files with 200 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Attachment/Display.vue
+50 -8
View File
@@ -4,17 +4,59 @@ const props = defineProps<{
id: string;
name: string;
mimeType: string;
status?: 'pending' | 'uploaded';
status?: 'uploading' | 'uploaded' | 'error';
url: string;
progress?: number;
}
}>();
const isImage = computed(() => props.file.mimeType.startsWith('image/'));
const isVideo = computed(() => props.file.mimeType.startsWith('video/'));
const isAudio = computed(() => props.file.mimeType.startsWith('audio/'));
const isPdf = computed(() => props.file.mimeType === 'application/pdf');
const fileIcon = computed(() => {
if (isImage.value) return 'i-mynaui-image';
if (isVideo.value) return 'i-mynaui-video';
if (isAudio.value) return 'i-mynaui-music';
if (isPdf.value) return 'i-tabler-file-type-pdf';
if (props.file.mimeType.includes('text')) return 'i-mynaui-file-text';
if (props.file.mimeType.includes('zip') || props.file.mimeType.includes('archive')) return 'i-mynaui-archive';
return 'i-mynaui-file';
});
const fileExtension = computed(() => {
const parts = props.file.name.split('.');
return parts.length > 1 ? parts.pop()?.toUpperCase() : 'FILE';
});
</script>
<template>
<img v-if="props.file.mimeType.startsWith('image/')" :src="props.file.url"
class="rounded-lg h-full w-full max-h-36 max-w-64 object-cover" />
<video v-else-if="props.file.mimeType.startsWith('video/')" controls :src="props.file.url"
class="rounded-lg h-full w-full max-h-36 max-w-64 aspect-ratio-video object-cover" />
<audio v-else-if="props.file.mimeType.startsWith('audio/')" :src="props.file.url"
class="rounded-lg h-full w-full max-h-36 max-w-64 object-cover" />
</template>
<div class="relative h-full w-fit">
<img v-if="isImage" :src="props.file.url" class="rounded-lg h-full w-full max-h-36 max-w-64 object-cover" />
<video v-else-if="isVideo" controls :src="props.file.url"
class="rounded-lg h-full w-full max-h-36 max-w-64 object-cover" />
<audio v-else-if="isAudio" controls :src="props.file.url" class="rounded-lg h-full w-full max-h-36 max-w-64" />
<div v-else class="flex items-center gap-2 p-2 rounded-lg bg-[var(--color-hover)] min-w-40 max-w-48">
<span :class="[fileIcon, 'text-6 text-[var(--color-accent)]']"></span>
<div class="flex-1 min-w-0">
<p class="text-sm truncate">{{ props.file.name }}</p>
<p class="text-xs text-[var(--text-tertiary)]">{{ fileExtension }}</p>
</div>
</div>
<div v-if="file.status === 'uploading'"
class="absolute inset-0 bg-black/50 rounded-lg flex items-center justify-center">
<div class="text-center">
<span class="i-svg-spinners-90-ring-with-bg text-6 text-white block mb-1"></span>
<span class="text-xs text-white">{{ file.progress || 0 }}%</span>
</div>
</div>
<button @click="$emit('delete')"
class="absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-4 h-4 rounded-full bg-[var(--bg-base)] border border-[var(--color-border)] text-xs text-[#ff3b3b]">
<span class="i-mynaui-x text-3"></span>
</button>
</div>
</template>