From be9cc494ef8dfd80c3960eb6f1afc18853c88d81 Mon Sep 17 00:00:00 2001
From: Zhigang Wang <zhigangw@hotmail.com>
Date: Sun, 9 Jun 2024 15:57:06 -0700
Subject: [PATCH] add example of download file

---
 frontend/src/pages/user/requests/Home.vue | 25 +++++++++++++++++-
 frontend/src/utils/backend/workspace.js   | 31 ++++++++++++++++++-----
 2 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/user/requests/Home.vue b/frontend/src/pages/user/requests/Home.vue
index a1d730f..ce1104c 100644
--- a/frontend/src/pages/user/requests/Home.vue
+++ b/frontend/src/pages/user/requests/Home.vue
@@ -49,7 +49,8 @@
                 </button>
                 <div class="request-description-content" v-html="request.content"></div>
                 <div v-for="(file, index) in request.attached_files" :key="index">
-                  <button @click="previewAttachedFile(request.id, file.document_id)">{{ file.file_name }}</button>
+                  <button @click="previewAttachedFile(request.id, file.document_id)">Preview{{ file.file_name }}</button>
+                  <button @click="downloadAttachedFile(request.id, file.document_id)">Download{{ file.file_name }}</button>
                 </div>
               </div>
               <div class="issuer-profile-container">
@@ -147,6 +148,28 @@ export default {
         this.mnx_backendErrorHandler(error)
       }
       )
+    },
+    downloadAttachedFile(request_id, document_id) {
+      WorksapceApi.fetchAttachedFileAsDownload(request_id, document_id).then(response => {
+        // create file link in browser's memory
+        const href = URL.createObjectURL(response.data);
+
+        // create "a" HTML element with href to file & click
+        const link = document.createElement('a');
+        link.href = href;
+        link.setAttribute('download', 'file.pdf'); //or any other extension
+        document.body.appendChild(link);
+        link.click();
+
+        // clean up "a" element & remove ObjectURL
+        document.body.removeChild(link);
+        URL.revokeObjectURL(href);        //TODO: navigate to the preview page
+      }).catch((error) => {
+        this.mnx_backendErrorHandler(error)
+      }
+      )
+
+
     }
   }
 }
diff --git a/frontend/src/utils/backend/workspace.js b/frontend/src/utils/backend/workspace.js
index 29af71e..69b3770 100644
--- a/frontend/src/utils/backend/workspace.js
+++ b/frontend/src/utils/backend/workspace.js
@@ -311,12 +311,15 @@ class WorksapceApi {
     formData.append('request_id', request_id)
     formData.append('file', file)
 
-    const request = backendAxios.post('/api/workspace/request/attach-file-for-request', formData, {
-      headers: {
-        'Content-Type': 'multipart/form-data',
-        Authorization: `Bearer ${jwt}`
-      }
-    })
+    const request = backendAxios.post(
+      '/api/workspace/request/attach-file-for-request',
+      formData,
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          Authorization: `Bearer ${jwt}`
+        }
+      })
     return request
   }
   static fetchAttachedFileAsMediaData(request_id, document_id) {
@@ -334,6 +337,22 @@ class WorksapceApi {
     return request
 
   }
+  static fetchAttachedFileAsDownload(request_id, document_id) {
+    let jwt = userUtils.getJwtToken()
+    const request = backendAxios.get(
+      '/api/workspace/request/fetch-attached-file-as-download',
+      {
+        params: {
+          request_id: request_id,
+          document_id: document_id,
+        },
+        responseType: 'blob',
+        headers: { Authorization: `Bearer ${jwt}` }
+      }
+    )
+    return request
+
+  }
 }
 
 export { WorksapceApi }