Add file preview functionality in Uploader components (#500)

* Add file preview functionality in Uploader components * Increase wait times in chat snapshot tests to 5000ms
swuecho · Jul 17, 2024 · f75150b · f75150b
1 parent 8f60c70
commit f75150b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/e2e/tests/11_chat_snapshot.spec.ts b/e2e/tests/11_chat_snapshot.spec.ts
@@ -25,20 +25,20 @@ test('test', async ({ page }) => {
   await page.getByTestId('repwd').locator('input').fill('@ThisIsATestPass5');
   await page.getByTestId('signup').click();
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(5000);
   let input_area = await page.$("#message_textarea textarea")
   await input_area?.click();
   await input_area?.fill('test_demo_bestqa');
   // await page.fill("#message_textarea", 'test_demo_bestqa');
   //await page.getByPlaceholder('来说点什么吧...（Shift + Enter = 换行）').press('Enter');
   await input_area?.press('Enter');
   // sleep 500ms
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(5000);
   await input_area?.click();
   await input_area?.fill('test_demo_bestqa');
   await input_area?.press('Enter');
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(5000);
 
   const user = await selectUserByEmail(pool, test_email);
   expect(user.email).toBe(test_email);
@@ -49,12 +49,12 @@ test('test', async ({ page }) => {
   expect(prompts.length).toBe(1);
   expect(prompts[0].updated_by).toBe(user.id);
   // sleep 500ms
-  await page.waitForTimeout(2000);;
+  await page.waitForTimeout(5000);;
   const messages = await selectChatMessagesBySessionUUID(pool, session.uuid)
   expect(messages.length).toBe(3);
   const page1Promise = page.waitForEvent('popup');
   await page.getByTestId('snpashot-button').getByRole('button').click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(5000);
   const page_snapshot = await page1Promise;
   await page_snapshot.waitForTimeout(500)
   snapshot_url = page_snapshot.url()

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>