Download specific version of the file

papermerge/core/routers/document_version.py

@@ -1,14 +1,13 @@
 import logging
-import os
 import uuid
+
 from fastapi import APIRouter, Depends, HTTPException
 from fastapi.responses import FileResponse
 
-from papermerge.core.models import User, DocumentVersion
+from papermerge.core.models import DocumentVersion, User
 
 from .auth import get_current_user as current_user
 
-
 logger = logging.getLogger(__name__)
 
 router = APIRouter(
@@ -19,6 +18,7 @@
 
 class PDFFileResponse(FileResponse):
     media_type = 'application/pdf'
+    content_disposition = 'attachment'
 
 
 @router.get("/{document_version_id}/download", response_class=PDFFileResponse)
@@ -36,12 +36,14 @@ def download_document_version(
             detail="Document version not found"
         )
 
-    file_abs_path = doc_ver.abs_file_path()
-
-    if not os.path.exists(file_abs_path):
+    if not doc_ver.file_path.exists():
         raise HTTPException(
             status_code=404,
             detail="Document version file not found"
         )
 
-    return PDFFileResponse(file_abs_path)
+    return PDFFileResponse(
+        doc_ver.file_path,
+        filename=doc_ver.file_name,
+        content_disposition_type='attachment'
+    )

ui/src/components/viewer/DocVersionsDropdown.tsx

@@ -1,5 +1,6 @@
 import Dropdown from 'react-bootstrap/Dropdown';
 import type { DocumentVersion } from "types";
+import { download_file } from 'utils/fetcher';
 
 
 type Args = {
@@ -18,9 +19,14 @@ function description(number: number, text: string): string {
 
 export default function DocVersionsDropdown({versions}: Args) {
 
+  const onClick = (href: string, file_name: string) => {
+    download_file(href, file_name);
+  }
+
   const dropdown_items = versions.map(
-    item => <Dropdown.Item href={item.download_url}>
-      {description(item.number, item.short_description)}
+    item => <Dropdown.Item key={item.id} onClick={
+      () => onClick(item.download_url, item.file_name)}>
+        {description(item.number, item.short_description)}
       </Dropdown.Item>
   );
 

ui/src/utils/fetcher.ts

@@ -18,6 +18,32 @@ function get_default_headers(cookie_name: string = COOKIE_NAME): DefaultHeaderTy
 }
 
 
+async function download_file(url: string, file_name: string) {
+  /*
+  Downloads a from given URL.
+
+  Based on:
+    https://stackoverflow.com/questions/32545632/how-can-i-download-a-file-using-window-fetch
+  */
+  fetch(url, {
+    headers: get_default_headers()
+  })
+  .then( res => res.blob() )
+  .then( blob => {
+    let url = window.URL.createObjectURL(blob);
+    let a = document.createElement('a');
+    a.href = url;
+    a.download = file_name;
+    // we need to append the element to the dom -> otherwise it will not work in firefox
+    document.body.appendChild(a);
+    a.click();
+    //afterwards we remove the element again
+    a.remove();
+  });
+
+}
+
+
 async function fetcher(url:string) {
   const headers = get_default_headers();
   return fetch(url, {headers: headers})
@@ -118,6 +144,7 @@ async function fetcher_delete<Input, Output>(
 
 export {
   get_default_headers,
+  download_file,
   fetcher,
   fetcher_upload,
   fetcher_post,