vikunja/vikunja
6
43
Fork 73
Code Issues 150 Pull Requests 21 Packages Releases 32 Activity

Frontend: Proof of concept for image preview #2266

Merged
konrad merged 20 commits from Elscrux/vikunja:feature/image-preview into main 2024-05-25 12:11:05 +00:00
Conversation 10 Commits 20 Files Changed 4 +26 -2
1 changed files with 26 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c2dfa9be83 - Show all commits

28
frontend/src/components/tasks/partials/attachments.vue
View File

@ -67,6 +67,12 @@
{{ a.file.mime }}
</span>
</p>
<img
konrad commented 2024-04-11 15:40:04 +00:00
Outdated
Review
Copy Link

I would extract this out into its own component, which takes the attachment, fetches the image and shows it next to the attachment. We could extend this further to show some kind of icon for pdfs or other file types later on.

I would extract this out into its own component, which takes the attachment, fetches the image and shows it next to the attachment. We could extend this further to show some kind of icon for pdfs or other file types later on.
Elscrux commented 2024-04-26 17:05:57 +00:00
Outdated
Review
Copy Link

Good point, I did that

Good point, I did that
v-if="canPreview(a)"
:src="blobUrls.get(a.id)"
style="height: 20vh; min-height: 100px"
alt=""
>
<p>
<BaseButton
v-tooltip="$t('task.attachment.downloadTooltip')"
@ -168,7 +174,7 @@
</template>
<script setup lang="ts">
import {ref, shallowReactive, computed} from 'vue'
import {ref, shallowReactive, computed, onMounted} from 'vue'
import {useDropZone} from '@vueuse/core'
import User from '@/components/misc/user.vue'
@ -222,6 +228,20 @@ function downloadAttachment(attachment: IAttachment) {
const filesRef = ref<HTMLInputElement | null>(null)
const blobUrls = ref<Map<number, string>>(new Map())
onMounted(() => {
fetchBlobUrls(attachments.value as IAttachment[])
})
async function fetchBlobUrls(attachments: IAttachment[]) {
for (const attachment of attachments) {
const blobUrl = await attachmentService.getBlobUrl(attachment)
if (canPreview(attachment)) {
blobUrls.value.set(attachment.id, blobUrl)
}
}
}
function uploadNewAttachment() {
const files = filesRef.value?.files
@ -260,13 +280,17 @@ async function deleteAttachment() {
const attachmentImageBlobUrl = ref<string | null>(null)
async function viewOrDownload(attachment: IAttachment) {
if (SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))) {
if (canPreview(attachment)) {
attachmentImageBlobUrl.value = await attachmentService.getBlobUrl(attachment)
} else {
downloadAttachment(attachment)
}
}
function canPreview(attachment: IAttachment): boolean {
return SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))
}
const copy = useCopyToClipboard()
function copyUrl(attachment: IAttachment) {