download document version

app/components/button/download_document_version.hbs

@@ -9,12 +9,10 @@
   <ul class="dropdown-menu">
     {{#each @document_versions as |document_version|}}
       <li>
-        <LinkTo
-          @route="authenticated.document-version-download"
-          @model={{document_version.id}}
-          class="dropdown-item">
+        <a class="dropdown-item" href="#"
+          {{on "click" (fn this.download document_version)}}>
             version {{document_version.number}} {{document_version.short_description}}
-        </LinkTo>
+        </a>
       </li>
     {{/each}}
   </ul>

app/components/button/download_document_version.js

+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+
+export default class ButtonDownloadComponent extends Component {
+
+  @service requests;
+
+  @action
+  download(document_version) {
+    /*
+      `document_version` contains following attributes:
+        id
+        number
+        file_name
+        lang
+        pages
+        size
+        page_count
+        short_description
+
+      attributes which correspond to server side (or client side) DocumentVersion model
+    */
+    this.requests.downloadDocumentVersion(
+      document_version
+    );
+  }
+}
+

app/components/viewer/action_buttons.hbs

 <div>
   <Button::DownloadDocumentVersion
     @document_versions={{@document_versions}} />
-  <button
-    class="btn btn-light"
-    type="button">
-      <i class="fa fa-upload mr-1"></i>
-    Upload
-  </button>
   <button
     class="btn btn-light"
     type="button"

app/components/viewer/index.js

@@ -10,7 +10,7 @@ export default class ViewComponent extends Component {
   @action
   onRunOCR() {
     this.requests.runOCR({
-      doc_id: this.args.last_document_version.id,
+      doc_id: this.args.doc.id,
       lang: 'deu'
     });
   }

app/router.js

@@ -11,10 +11,6 @@ Router.map(function () {
     this.route('documents');
     this.route('inbox');
     this.route('document', { path: '/document/:document_id' });
-    this.route(
-      'document-version-download',
-      { path: '/document-versions/:document_version_id/download/' }
-    );
 
     this.route('nodes', { path: '/nodes/:node_id' });
 

app/services/requests.js

@@ -27,6 +27,46 @@ export default class Requests extends Service {
     });
   }
 
+  async downloadDocumentVersion(document_version) {
+    /*
+      `document_version` contains following attributes:
+        id
+        number
+        file_name
+        lang
+        pages
+        size
+        page_count
+        short_description
+
+      attributes which correspond to server side (or client side) DocumentVersion model
+    */
+    let url, headers_copy = {};
+
+    url = `${this.base_url}document-versions/${document_version.id}/download/`;
+    Object.assign(headers_copy, this.headers);
+     //headers_copy['Access-Control-Allow-Origin'] = ENV.APP.HOST;
+
+    return fetch(url, {
+      method: 'GET',
+      headers: headers_copy
+    }).then(
+      response => response.blob()
+    ).then((blob) => {
+      let url = window.URL.createObjectURL(blob);
+      let a = document.createElement('a');
+
+      a.href = url;
+      a.download = document_version.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();
+    });
+  }
+
   get base_url() {
     return `${ENV.APP.HOST}/${ENV.APP.NAMESPACE}/`;
   }