freeleaps_product/freeleaps_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add example of download file

Browse Source
This commit is contained in:
Zhigang Wang 2024-06-09 15:57:06 -07:00
parent 385631ee06
commit be9cc494ef
2 changed files with 49 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/pages/user/requests/Home.vue
View File

@ -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)
}
)
}
}
}

31
frontend/src/utils/backend/workspace.js
View File

@ -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 }