101 lines
2.6 KiB
Vue
101 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from "vue"
|
|
|
|
const props = defineProps<{
|
|
fileId: string
|
|
path?: string | null
|
|
interactive?: boolean
|
|
}>()
|
|
|
|
const { $api } = useNuxtApp()
|
|
const objectUrl = ref<string | null>(null)
|
|
const loadFailed = ref(false)
|
|
|
|
const isPdf = computed(() => String(props.path || "").toLowerCase().endsWith(".pdf"))
|
|
|
|
const revokeObjectUrl = () => {
|
|
if (!objectUrl.value) return
|
|
URL.revokeObjectURL(objectUrl.value)
|
|
objectUrl.value = null
|
|
}
|
|
|
|
watch(() => props.fileId, async (fileId, _previous, onCleanup) => {
|
|
revokeObjectUrl()
|
|
loadFailed.value = false
|
|
let active = true
|
|
const controller = new AbortController()
|
|
onCleanup(() => {
|
|
active = false
|
|
controller.abort()
|
|
revokeObjectUrl()
|
|
})
|
|
|
|
try {
|
|
const blob = await $api<Blob>(`/api/files/content/${encodeURIComponent(fileId)}`, {
|
|
responseType: "blob",
|
|
signal: controller.signal,
|
|
})
|
|
if (!active) return
|
|
objectUrl.value = URL.createObjectURL(blob)
|
|
} catch (error) {
|
|
if (!active) return
|
|
loadFailed.value = true
|
|
console.error("Dateivorschau konnte nicht geladen werden:", error)
|
|
}
|
|
}, { immediate: true })
|
|
</script>
|
|
|
|
<template>
|
|
<div class="authenticated-file-preview" :class="{ 'is-interactive': interactive }">
|
|
<iframe
|
|
v-if="objectUrl && isPdf && !loadFailed"
|
|
:src="interactive ? objectUrl : `${objectUrl}#toolbar=0&navpanes=0&scrollbar=0`"
|
|
title="PDF-Vorschau"
|
|
loading="lazy"
|
|
/>
|
|
<img v-else-if="objectUrl && !loadFailed" :src="objectUrl" alt="Dateivorschau" @error="loadFailed = true" />
|
|
<div v-else-if="loadFailed" class="preview-placeholder" role="status">
|
|
<UIcon name="i-heroicons-document" class="h-10 w-10" />
|
|
<span>Keine Vorschau verfügbar</span>
|
|
<span v-if="interactive">Du kannst das Dokument herunterladen oder in einem neuen Tab öffnen.</span>
|
|
</div>
|
|
<USkeleton v-else class="h-full min-h-32 w-full" aria-label="Dokumentvorschau wird geladen" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.authenticated-file-preview,
|
|
.authenticated-file-preview iframe,
|
|
.authenticated-file-preview img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.authenticated-file-preview iframe {
|
|
border: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.authenticated-file-preview.is-interactive iframe {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.authenticated-file-preview img {
|
|
object-fit: contain;
|
|
}
|
|
|
|
.preview-placeholder {
|
|
display: flex;
|
|
min-height: 8rem;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
color: rgb(107 114 128);
|
|
font-size: 0.875rem;
|
|
height: 100%;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
}
|
|
</style>
|