Add file preview functionality in Uploader components

swuecho · Jul 17, 2024 · 8b6d550 · 8b6d550
1 parent 8f60c70
commit 8b6d550
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/web/src/views/chat/components/Uploader.vue b/web/src/views/chat/components/Uploader.vue
@@ -2,7 +2,8 @@
         <div>
                 <NUpload multiline :action="actionURL" :headers="headers" :data="data" :default-file-list="fileListData"
                         :show-download-button="true" @finish="handleFinish" @before-upload="beforeUpload"
-                        @remove="handleRemove" @download="handleDownload" @update:file-list="handleFileListUpdate">
+                        @preview="handlePreview" @remove="handleRemove" @download="handleDownload"
+                        @update:file-list="handleFileListUpdate">
 
                         <NButton v-if="showUploaderButton" id="attach_file_button" data-testid="attach_file_button"
                                 type="primary"> {{ $t('chat.uploader_button') }}
@@ -98,7 +99,6 @@ function handleFinish({ file, event }: { file: UploadFileInfo, event?: ProgressE
 
 }
 
-// @ts-ignore
 function handleRemove({ file }: { file: UploadFileInfo }) {
         console.log('remove', file)
         if (file.url) {
@@ -113,8 +113,13 @@ function fileUrl(file: UploadFileInfo): string {
         const url = `/download/${file_id}`
         return url
 }
-// @ts-ignore
-async function handleDownload(file) {
+
+function handlePreview(file: UploadFileInfo, detail: { event: MouseEvent }) {
+        detail.event.preventDefault()
+        handleDownload(file)
+}
+
+async function handleDownload(file: UploadFileInfo) {
         console.log('download', file)
         // get last part of file.url
         const url = fileUrl(file)

diff --git a/web/src/views/chat/components/UploaderReadOnly.vue b/web/src/views/chat/components/UploaderReadOnly.vue
@@ -100,7 +100,6 @@ function fileUrl(file: UploadFileInfo): string {
         return url
 }
 
-// @ts-ignore
 function handleRemove({ file }: { file: UploadFileInfo }) {
         console.log('remove', file)
         if (file.url) {
@@ -110,6 +109,12 @@ function handleRemove({ file }: { file: UploadFileInfo }) {
         console.log(file.url)
 }
 
+async function handlePreview(file: UploadFileInfo, detail: { event: MouseEvent }) {
+        detail.event.preventDefault()
+        await handleDownload(file)
+}
+
+
 // @ts-ignore
 async function handleDownload(file) {
         console.log('download', file)
@@ -140,9 +145,4 @@ async function handleDownload(file) {
         return false //!!! cancel original download
 }
 
-async function handlePreview(file: UploadFileInfo) {
-        console.log('preview', file)
-        await handleDownload(file)
-        return false
-}
 </script>