Merge pull request #299 from opcodesio/bug/downloading-files-with-headers

Bug / downloading files with headers

Author: arukompas

package-lock.json

@@ -33,6 +33,7 @@
         "vue": "^3.2.47",
         "vue-loader": "^17.0.1",
         "vue-router": "^4.1.6",
-        "vue-template-compiler": "^2.7.14"
+        "vue-template-compiler": "^2.7.14",
+        "streamsaver": "^2.0.6"
     }
 }

package.json

@@ -5,6 +5,8 @@
  * @license  MIT
  */
 
+/*! #__NO_SIDE_EFFECTS__ */
+
 /*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
 
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

public/app.css

@@ -1,6 +1,6 @@
 {
-    "/app.js": "/app.js?id=a9c7dc2c5d650205333810ac101da5e4",
-    "/app.css": "/app.css?id=1d3e1405b5f756d27f515e824e61f265",
+    "/app.js": "/app.js?id=0c6cf8ac8d5abf3598949d9417bf56eb",
+    "/app.css": "/app.css?id=df9446e9defec9b688bb5566dc40e285",
     "/img/log-viewer-128.png": "/img/log-viewer-128.png?id=d576c6d2e16074d3f064e60fe4f35166",
     "/img/log-viewer-32.png": "/img/log-viewer-32.png?id=f8ec67d10f996aa8baf00df3b61eea6d",
     "/img/log-viewer-64.png": "/img/log-viewer-64.png?id=8902d596fc883ca9eb8105bb683568c6"

public/app.js

@@ -0,0 +1,45 @@
+<script setup>
+import { CloudArrowDownIcon } from '@heroicons/vue/24/outline';
+import streamSaver from 'streamsaver';
+import axios from 'axios';
+
+const props = defineProps(['url']);
+
+const downloadFile = async () => {
+  const response = await axios.get(props.url, {
+    responseType: 'blob'
+  });
+
+  if (response.status !== 200) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+
+  const disposition = response.headers['content-disposition'];
+  const filename = disposition ? disposition.split('filename=')[1].replace(/"/g, '') : 'download.txt';
+
+  const fileStream = streamSaver.createWriteStream(filename);
+  const readableStream = response.data.stream();
+
+  if (window.WritableStream && readableStream.pipeTo) {
+    return readableStream.pipeTo(fileStream)
+      .then(() => console.log('done writing'));
+  }
+
+  window.writer = fileStream.getWriter();
+  const reader = readableStream.getReader();
+  const pump = () => reader.read()
+    .then(res => res.done
+      ? writer.close()
+      : writer.write(res.value).then(pump));
+
+  pump();
+};</script>
+
+<template>
+  <button @click="downloadFile">
+    <slot>
+      <CloudArrowDownIcon class="w-4 h-4 mr-2" />
+      Download
+    </slot>
+  </button>
+</template>

public/app.js.LICENSE.txt

@@ -135,10 +135,7 @@
                     </MenuItem>
 
                     <MenuItem v-if="folder.can_download" v-slot="{ active }">
-                      <a :href="folder.download_url" download @click.stop :class="[active ? 'active' : '']">
-                        <CloudArrowDownIcon class="w-4 h-4 mr-2"/>
-                        Download
-                      </a>
+                      <DownloadLink :url="folder.download_url" @click.stop :class="[active ? 'active' : '']" />
                     </MenuItem>
 
                     <template v-if="folder.can_delete">
@@ -201,7 +198,6 @@ import {
   ArrowLeftIcon,
   ArrowPathIcon,
   CircleStackIcon,
-  CloudArrowDownIcon,
   EllipsisVerticalIcon,
   ExclamationTriangleIcon,
   FolderIcon,
@@ -220,6 +216,7 @@ import SiteSettingsDropdown from './SiteSettingsDropdown.vue';
 import HostSelector from './HostSelector.vue';
 import { handleKeyboardFileNavigation, handleKeyboardFileSettingsNavigation } from '../keyboardNavigation';
 import FileTypeSelector from './FileTypeSelector.vue';
+import DownloadLink from "./DownloadLink.vue";
 
 const router = useRouter();
 const route = useRoute();

public/mix-manifest.json

@@ -45,10 +45,7 @@
             </MenuItem>
 
             <MenuItem v-if="logFile.can_download" @click.stop v-slot="{ active }">
-              <a :href="logFile.download_url" download :class="[active ? 'active' : '']">
-                <CloudArrowDownIcon class="w-4 h-4 mr-2" />
-                Download
-              </a>
+              <DownloadLink :url="logFile.download_url" :class="[active ? 'active' : '']" />
             </MenuItem>
 
             <template v-if="logFile.can_delete">
@@ -78,12 +75,13 @@
 <script setup>
 import { computed } from 'vue';
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
-import { CircleStackIcon, CloudArrowDownIcon, EllipsisVerticalIcon, TrashIcon } from '@heroicons/vue/24/outline';
+import { CircleStackIcon, EllipsisVerticalIcon, TrashIcon } from '@heroicons/vue/24/outline';
 import { useFileStore } from '../stores/files.js';
 import SpinnerIcon from './SpinnerIcon.vue';
 import { replaceQuery, useDropdownDirection } from '../helpers.js';
 import { useRouter } from 'vue-router';
 import { handleKeyboardFileNavigation, handleKeyboardFileSettingsNavigation } from '../keyboardNavigation';
+import DownloadLink from "./DownloadLink.vue";
 
 const props = defineProps({
   logFile: {

resources/js/components/DownloadLink.vue

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia';
+import axios from 'axios';
 
 export const useSearchStore = defineStore({
   id: 'search',
@@ -40,9 +41,9 @@ export const useSearchStore = defineStore({
       const queryChecked = this.query;
       if (queryChecked === '') return;
       const queryParams = '?' + new URLSearchParams({ query: queryChecked });
-      fetch(this.searchMoreRoute + queryParams)
-        .then((response) => response.json())
-        .then((data) => {
+      axios.get(this.searchMoreRoute + queryParams)
+        .then((response) => {
+          const data = response.data;
           if (this.query !== queryChecked) return;
           const wasPreviouslySearching = this.searching;
           this.searching = data.hasMoreResults;