Unverified Commit 61bfb578 authored by dbulatovicx32's avatar dbulatovicx32 Committed by GitHub
Browse files

[KNOWAGE-7041]

Added the image preview functionality with toast informing the user that its uploaded.
parent d2eb1c57
......@@ -392,7 +392,8 @@
"restrictionValueHint": "Enter Value",
"restrictionsTitle": "Visibility Restrictions",
"uploadTemplate": "Upload template",
"visibilityLocationTitle": "Select the functionalities where the document will be visible"
"visibilityLocationTitle": "Select the functionalities where the document will be visible",
"imageInfo": "Image successfully uploaded"
},
"outputParams": {
"customValue": "Custom Value",
......
......@@ -64,7 +64,8 @@
</div>
<div class="p-field p-col-12 p-lg-6">
<img v-if="selectedDocument?.previewFile" id="image-preview" :src="getImageUrl" :height="mainDescriptor.style.previewImage" />
<img v-if="selectedDocument?.previewFile && !imagePreview" id="image-preview" :src="getImageUrl" :height="mainDescriptor.style.previewImage" />
<img v-if="imagePreviewUrl && imagePreview" id="image-preview" :src="imagePreviewUrl" :height="mainDescriptor.style.previewImage" />
</div>
<div class="p-field p-col-12 p-lg-6">
......@@ -363,7 +364,9 @@ export default defineComponent({
imageToUpload: { name: '' } as any,
visibilityAttribute: '',
restrictionValue: '',
driversPositions: infoDescriptor.driversPositions
driversPositions: infoDescriptor.driversPositions,
imagePreviewUrl: null as any,
imagePreview: false
}
},
created() {
......@@ -384,6 +387,7 @@ export default defineComponent({
this.document = this.selectedDocument as iDocument
this.dataset = this.selectedDataset
this.folders = this.availableFolders as iFolder[]
this.resetImagePreview()
this.IsLockedByUser()
},
IsLockedByUser() {
......@@ -427,9 +431,19 @@ export default defineComponent({
this.uploading = true
this.imageToUpload = event.target.files[0]
this.$emit('setImageForUpload', event.target.files[0])
this.setImagePreview(event.target.files[0])
this.triggerImageUpload = false
setTimeout(() => (this.uploading = false), 200)
},
setImagePreview(imageFile) {
this.imagePreviewUrl = URL.createObjectURL(imageFile)
this.imagePreview = true
this.$store.commit('setInfo', { title: this.$t('common.uploadFileSuccess'), msg: this.$t('documentExecution.documentDetails.info.imageInfo') })
},
resetImagePreview() {
this.imagePreviewUrl = null
this.imagePreview = false
},
setFunctionality(event) {
this.document.functionalities = event
},
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment