Dimitrie Stefanescu
108 lines
2.6 KiB
Vue
108 lines
2.6 KiB
Vue
<template>
|
|
<v-card>
|
|
<v-toolbar>
|
|
<v-toolbar-title>
|
|
{{ attachment.fileName }}
|
|
</v-toolbar-title>
|
|
<v-spacer />
|
|
<v-btn class="primary" @click="downloadBlob()">
|
|
<v-icon class="mr-2">mdi-download</v-icon>
|
|
{{ prettyFileSize(attachment.fileSize) }}
|
|
</v-btn>
|
|
</v-toolbar>
|
|
<template v-if="isImage && !error">
|
|
<v-img min-width="100%" min-height="100px" :src="blobUrl">
|
|
<template #placeholder>
|
|
<v-row class="fill-height ma-0" align="center" justify="center">
|
|
<v-progress-circular
|
|
indeterminate
|
|
color="grey lighten-5"
|
|
></v-progress-circular>
|
|
</v-row>
|
|
</template>
|
|
</v-img>
|
|
</template>
|
|
<template v-else-if="!error">
|
|
<v-card-text class="mt-4">
|
|
<v-icon small class="mr-2">mdi-alert</v-icon>
|
|
Be cautious when downloading! Attachments are not scanned for harmful content.
|
|
</v-card-text>
|
|
</template>
|
|
<template v-else>
|
|
<v-card-text class="mt-4">
|
|
<v-icon small class="mr-2">mdi-alert</v-icon>
|
|
Failed to preview attachment.
|
|
</v-card-text>
|
|
</template>
|
|
</v-card>
|
|
</template>
|
|
<script>
|
|
import Vue from 'vue'
|
|
import { prettyFileSize } from '@/main/lib/common/file-upload/fileUploadHelper'
|
|
import {
|
|
getBlobUrl,
|
|
downloadBlobWithUrl
|
|
} from '@/main/lib/common/file-upload/blobStorageApi'
|
|
|
|
export default Vue.extend({
|
|
name: 'CommentThreadAttachmentPreview',
|
|
props: {
|
|
attachment: {
|
|
type: Object,
|
|
default: () => null,
|
|
required: true
|
|
},
|
|
isOpen: { type: Boolean, required: true }
|
|
},
|
|
data: () => ({
|
|
prettyFileSize,
|
|
blobUrl: null,
|
|
error: null
|
|
}),
|
|
computed: {
|
|
isImage() {
|
|
switch (this.attachment.fileType) {
|
|
case 'jpg':
|
|
case 'jpeg':
|
|
case 'png':
|
|
case 'gif':
|
|
return true
|
|
default:
|
|
return false
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
isOpen(val) {
|
|
if (!val && this.blobUrl) {
|
|
window.URL.revokeObjectURL(this.blobUrl)
|
|
}
|
|
}
|
|
},
|
|
async mounted() {
|
|
try {
|
|
if (this.isImage) {
|
|
this.blobUrl = await getBlobUrl(this.attachment.id, {
|
|
streamId: this.$route.params.streamId
|
|
})
|
|
}
|
|
} catch (e) {
|
|
this.error = e
|
|
}
|
|
},
|
|
methods: {
|
|
async downloadBlob() {
|
|
try {
|
|
const { id, fileName, streamId } = this.attachment
|
|
await downloadBlobWithUrl(id, fileName, { streamId })
|
|
} catch (e) {
|
|
this.$eventHub.$emit('notification', {
|
|
text: e.message
|
|
})
|
|
}
|
|
this.$emit('close')
|
|
}
|
|
}
|
|
})
|
|
</script>
|