feat: use html5 for file downloads (#95)

Remove jquery-file-download plugin. Download attachment files in new window as fallback if html5 blob method errors.
alubbock · Sep 7, 2024 · 5ba13dd · 5ba13dd
1 parent f972ea8
commit 5ba13dd
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 16 deletions.
diff --git a/thunorweb/serve_file.py b/thunorweb/serve_file.py
@@ -28,8 +28,6 @@ def serve_file(request, full_file_name, rename_to=None, content_type=None):
                                rename_to=rename_to,
                                content_type=content_type)
 
-    # Cookie needed for jquery-file-download plugin
-    response['Set-Cookie'] = 'fileDownload=true; path=/'
     return response
 
 

diff --git a/thunorweb/views/dataset_downloads.py b/thunorweb/views/dataset_downloads.py
@@ -37,7 +37,6 @@ def _plain_response(response_text):
     response = HttpResponse(response_text, content_type='text/plain')
     response['Content-Disposition'] = \
         'attachment; filename="download_failed.txt"'
-    response['Set-Cookie'] = 'fileDownload=true; path=/'
     return response
 
 

diff --git a/thunorweb/webpack/package.json b/thunorweb/webpack/package.json
@@ -21,7 +21,6 @@
     "file-saver": "^2.0.0",
     "font-awesome": "^4.7.0",
     "jquery": "^3.1.1",
-    "jquery-file-download": "^1.4.6",
     "jquery-ui": "^1.12.1",
     "jquery-ui-touch-punch": "^0.2.3",
     "plotly.js": "^2.34.0",

diff --git a/thunorweb/webpack/thunorweb/js/dataset.js b/thunorweb/webpack/thunorweb/js/dataset.js
@@ -29,7 +29,6 @@ const accept_license = function() {
             dataType: 'json'});
 };
 
-
 const activate = function(showLicense) {
     $('#dataset-name-edit').click(function() {
         var datasetName = $('.dataset-name').first().text();
@@ -67,16 +66,38 @@ const activate = function(showLicense) {
         e.preventDefault();
         ui.loadingModal.show();
         var $this = $(e.currentTarget);
-        $.fileDownload($this.attr("href"), {
-            successCallback: function () {
-                ui.loadingModal.hide();
-            },
-            failCallback: function () {
-                ui.loadingModal.hide();
-                Sentry.captureMessage("Error downloading file");
-                Sentry.showReportDialog();
+
+        fetch($this.attr("href"))
+        .then(resp => {
+            let filename = $this.attr("href").replace(/\/$/, '');
+            filename = filename.substring(filename.lastIndexOf('/') + 1);
+            let disposition = resp.headers.get('content-disposition');
+            if (disposition && disposition.indexOf('attachment') !== -1) {
+                let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+                let matches = filenameRegex.exec(disposition);
+                if (matches != null && matches[1]) {
+                  filename = matches[1].replace(/['"]/g, '');
+                }
             }
-        });
+            resp.blob().then(blob => {
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.style.display = 'none';
+                a.href = url;
+                // the filename you want
+                a.download = filename;
+                document.body.appendChild(a);
+                a.click();
+                window.URL.revokeObjectURL(url);
+            });
+        })
+        // fallback method
+        .catch((e) => {
+            Sentry.captureException(e);
+            window.open($this.attr("href"), '_blank');
+        })
+        .finally(() => ui.loadingModal.hide());
+
         return false;
     });
 

diff --git a/thunorweb/webpack/webpack.config.js b/thunorweb/webpack/webpack.config.js
@@ -57,8 +57,7 @@ var config = {
                  "datatables.net-select-bs",
                  "datatables.net-select-bs/css/select.bootstrap.css",
                  "datatables.net-buttons-bs",
-                 "datatables.net-buttons-bs/css/buttons.bootstrap.css",
-                 "jquery-file-download"]
+                 "datatables.net-buttons-bs/css/buttons.bootstrap.css"]
     },
 
     output: {