Creates FileDownloader plugin to allow trigger file downloads with headers. #848.

src/views/admin/components/lists/processes-list.vue

@@ -280,7 +280,7 @@
                             <p>
                                 <a
                                     v-if="bgProcess.log"
-                                    :href="bgProcess.log">
+                                    @click="$fileDownloader.fetch(bgProcess.log)">
                                     <span class="icon is-small">
                                         <i class="tainacan-icon tainacan-icon-18px tainacan-icon-openurl"/>
                                     </span>
@@ -290,7 +290,7 @@
                                 <a
                                     v-if="bgProcess.error_log"
                                     class="has-text-danger"
-                                    :href="bgProcess.error_log">
+                                    @click="$fileDownloader.fetch(bgProcess.error_log)">
                                     <span class="icon is-small">
                                         <i class="tainacan-icon tainacan-icon-18px tainacan-icon-openurl"/>
                                     </span>

src/views/admin/components/other/processes-popup.vue

@@ -122,12 +122,12 @@
                         <br>
                         <a 
                                 v-if="bgProcess.log"
-                                :href="bgProcess.log">{{ $i18n.get('label_log_file') }}</a>
+                                @click="$fileDownloader.fetch(bgProcess.log)">{{ $i18n.get('label_log_file') }}</a>
                         <span v-if="bgProcess.error_log"> | </span>
                         <a 
                                 v-if="bgProcess.error_log"
                                 class="has-text-danger"
-                                :href="bgProcess.error_log">{{ $i18n.get('label_error_log_file') }}</a>
+                                @click="$fileDownloader.fetch(bgProcess.error_log)">{{ $i18n.get('label_error_log_file') }}</a>
                     </div>
                 </li>
             </ul>

src/views/admin/js/admin-main.js

@@ -83,7 +83,8 @@ import {
     StatusHelperPlugin,
     CommentsStatusHelperPlugin,
     AdminOptionsHelperPlugin,
-    HtmlSanitizerPlugin 
+    HtmlSanitizerPlugin, 
+    FileDownloaderPlugin
 } from './admin-utilities';
 import { 
     ThumbnailHelperPlugin,
@@ -176,6 +177,7 @@ export default (element) => {
             Vue.use(ThumbnailHelperPlugin);
             Vue.use(OrderByHelperPlugin);
             Vue.use(StatusHelperPlugin);
+            Vue.use(FileDownloaderPlugin);
             Vue.use(HtmlSanitizerPlugin);
             Vue.use(ConsolePlugin, {visual: false});
             Vue.use(VueTheMask);

src/views/admin/js/admin-utilities.js

@@ -133,7 +133,6 @@ I18NPlugin.install = function (Vue, options = {}) {
             }
         }
     }
-
 };
 
 // USER PREFERENCES - Used to save key-value information for user settings of plugin
@@ -376,6 +375,64 @@ UserCapabilitiesPlugin.install = function (Vue, options = {}) {
     }
 };
 
+// FILE DOWNLOADER PLUGIN - Allows fetching a file passing proper headers.
+export const FileDownloaderPlugin = {};
+FileDownloaderPlugin.install = function (Vue, options = {}) {
+    
+    Vue.prototype.$fileDownloader = {
+        async fetch(urlLink) {
+            try {
+                // Build heaaders from tainacan_plugin variable
+                let requestHeaders = {};
+
+                if (tainacan_plugin.nonce) {
+                    requestHeaders['common'] = {};
+                    requestHeaders['common']['X-WP-Nonce'] = tainacan_plugin.nonce;
+                }
+
+                if (tainacan_plugin.admin_request_options) {
+                    Object.keys(tainacan_plugin.admin_request_options).forEach(requestOption => {
+                        requestHeaders[requestOption] = tainacan_plugin.admin_request_options[requestOption];
+                    });
+                }
+
+                // Async request for the file, passing propper headers
+                const response = await fetch(urlLink, {
+                    headers: requestHeaders
+                });
+        
+                // Creates an URL link in the form of blob:https://...
+                const blob = await response.blob();
+                const url = window.URL.createObjectURL(blob);
+
+                // Get the filename from the Content-Disposition header
+                const contentDisposition = response.headers.get('content-disposition');
+                let filename = 'log.txt';
+                if (contentDisposition) {
+                    const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(contentDisposition);
+                    if (matches != null && matches[1])
+                        filename = matches[1].replace(/['"]/g, '');
+                }
+
+                // Creates a temporal link and clicks it to download the file
+                const a = document.createElement('a');
+                a.href = url;
+                a.target = '_blank';
+                a.download = filename;
+                
+                document.body.appendChild(a);
+                a.click();
+                
+                window.URL.revokeObjectURL(url);
+                a.remove();
+
+            } catch (error) {
+                console.error('Tainacan received and error downloading file:', error);
+            }
+        }
+    }
+};
+
 // STATUS ICONS PLUGIN - Sets icon for status option
 export const StatusHelperPlugin = {};
 StatusHelperPlugin.install = function (Vue, options = {}) {