feat: integrate tus.io for resumable and chunked uploads (#2145)

frontend/src/api/files.js

@@ -1,6 +1,7 @@
 import { createURL, fetchURL, removePrefix } from "./utils";
 import { baseURL } from "@/utils/constants";
 import store from "@/store";
+import { upload as postTus, useTus } from "./tus";
 
 export async function fetch(url) {
   url = removePrefix(url);
@@ -78,6 +79,22 @@ export function download(format, ...files) {
 }
 
 export async function post(url, content = "", overwrite = false, onupload) {
+  // Use the pre-existing API if:
+  const useResourcesApi =
+    // a folder is being created
+    url.endsWith("/") ||
+    // We're not using http(s)
+    (content instanceof Blob &&
+      !["http:", "https:"].includes(window.location.protocol)) ||
+    // Tus is disabled / not applicable
+    !(await useTus(content));
+
+  return useResourcesApi
+    ? postResources(url, content, overwrite, onupload)
+    : postTus(url, content, overwrite, onupload);
+}
+
+async function postResources(url, content = "", overwrite = false, onupload) {
   url = removePrefix(url);
 
   let bufferContent;

frontend/src/api/tus.js

@@ -0,0 +1,85 @@
+import * as tus from "tus-js-client";
+import { tusEndpoint, tusSettings } from "@/utils/constants";
+import store from "@/store";
+import { removePrefix } from "@/api/utils";
+import { fetchURL } from "./utils";
+
+const RETRY_BASE_DELAY = 1000;
+const RETRY_MAX_DELAY = 20000;
+
+export async function upload(url, content = "", overwrite = false, onupload) {
+  if (!tusSettings) {
+    // Shouldn't happen as we check for tus support before calling this function
+    throw new Error("Tus.io settings are not defined");
+  }
+
+  url = removePrefix(url);
+  let resourceUrl = `${tusEndpoint}${url}?override=${overwrite}`;
+
+  await createUpload(resourceUrl);
+
+  return new Promise((resolve, reject) => {
+    let upload = new tus.Upload(content, {
+      uploadUrl: resourceUrl,
+      chunkSize: tusSettings.chunkSize,
+      retryDelays: computeRetryDelays(tusSettings),
+      parallelUploads: 1,
+      storeFingerprintForResuming: false,
+      headers: {
+        "X-Auth": store.state.jwt,
+      },
+      onError: function (error) {
+        reject("Upload failed: " + error);
+      },
+      onProgress: function (bytesUploaded) {
+        // Emulate ProgressEvent.loaded which is used by calling functions
+        // loaded is specified in bytes (https://developer.mozilla.org/en-US/docs/Web/API/ProgressEvent/loaded)
+        if (typeof onupload === "function") {
+          onupload({ loaded: bytesUploaded });
+        }
+      },
+      onSuccess: function () {
+        resolve();
+      },
+    });
+    upload.start();
+  });
+}
+
+async function createUpload(resourceUrl) {
+  let headResp = await fetchURL(resourceUrl, {
+    method: "POST",
+  });
+  if (headResp.status !== 201) {
+    throw new Error(
+      `Failed to create an upload: ${headResp.status} ${headResp.statusText}`
+    );
+  }
+}
+
+function computeRetryDelays(tusSettings) {
+  if (!tusSettings.retryCount || tusSettings.retryCount < 1) {
+    // Disable retries altogether
+    return null;
+  }
+  // The tus client expects our retries as an array with computed backoffs
+  // E.g.: [0, 3000, 5000, 10000, 20000]
+  const retryDelays = [];
+  let delay = 0;
+
+  for (let i = 0; i < tusSettings.retryCount; i++) {
+    retryDelays.push(Math.min(delay, RETRY_MAX_DELAY));
+    delay =
+      delay === 0 ? RETRY_BASE_DELAY : Math.min(delay * 2, RETRY_MAX_DELAY);
+  }
+
+  return retryDelays;
+}
+
+export async function useTus(content) {
+  return isTusSupported() && content instanceof Blob;
+}
+
+function isTusSupported() {
+  return tus.isSupported === true;
+}

frontend/src/components/prompts/Replace.vue

@@ -17,6 +17,14 @@
       >
         {{ $t("buttons.cancel") }}
       </button>
+      <button
+        class="button button--flat button--blue"
+        @click="showAction"
+        :aria-label="$t('buttons.continue')"
+        :title="$t('buttons.continue')"
+      >
+        {{ $t("buttons.continue") }}
+      </button>
       <button
         class="button button--flat button--red"
         @click="showConfirm"
@@ -34,6 +42,6 @@ import { mapState } from "vuex";
 
 export default {
   name: "replace",
-  computed: mapState(["showConfirm"]),
+  computed: mapState(["showConfirm", "showAction"]),
 };
 </script>

frontend/src/css/styles.css

@@ -376,6 +376,16 @@ body.rtl .breadcrumbs .chevron {
   }
 }
 
+/* * * * * * * * * * * * * * * *
+ *         SETTINGS TUS        *
+ * * * * * * * * * * * * * * * */
+
+.tusConditionalSettings input:disabled {
+  background-color: #ddd;
+  color: #999;
+  cursor: not-allowed;
+}
+
 /* * * * * * * * * * * * * * * *
  *         SETTINGS RULES      *
  * * * * * * * * * * * * * * * */

frontend/src/i18n/en.json

@@ -37,7 +37,8 @@
     "toggleSidebar": "Toggle sidebar",
     "update": "Update",
     "upload": "Upload",
-    "openFile": "Open file"
+    "openFile": "Open file",
+    "continue": "Continue"
   },
   "download": {
     "downloadFile": "Download File",
@@ -148,7 +149,7 @@
     "rename": "Rename",
     "renameMessage": "Insert a new name for",
     "replace": "Replace",
-    "replaceMessage": "One of the files you're trying to upload is conflicting because of its name. Do you wish to replace the existing one?\n",
+    "replaceMessage": "One of the files you're trying to upload is conflicting because of its name. Do you wish to continue to upload or replace the existing one?\n",
     "schedule": "Schedule",
     "scheduleMessage": "Pick a date and time to schedule the publication of this post.",
     "show": "Show",
@@ -185,6 +186,10 @@
     "commandRunnerHelp": "Here you can set commands that are executed in the named events. You must write one per line. The environment variables {0} and {1} will be available, being {0} relative to {1}. For more information about this feature and the available environment variables, please read the {2}.",
     "commandsUpdated": "Commands updated!",
     "createUserDir": "Auto create user home dir while adding new user",
+    "tusUploads": "Chunked Uploads",
+    "tusUploadsHelp": "File Browser supports chunked file uploads, allowing for the creation of efficient, reliable, resumable and chunked file uploads even on unreliable networks.",
+    "tusUploadsChunkSize": "Indicates to maximum size of a request (direct uploads will be used for smaller uploads). You may input a plain integer denoting a bytes input or a string like 10MB, 1GB etc.",
+    "tusUploadsRetryCount": "Number of retries to perform if a chunk fails to upload.",
     "userHomeBasePath": "Base path for user home directories",
     "userScopeGenerationPlaceholder": "The scope will be auto generated",
     "createUserHomeDirectory": "Create user home directory",

frontend/src/store/index.js

@@ -23,6 +23,7 @@ const state = {
   show: null,
   showShell: false,
   showConfirm: null,
+  showAction: null,
 };
 
 export default new Vuex.Store({

frontend/src/store/mutations.js

@@ -5,6 +5,7 @@ const mutations = {
   closeHovers: (state) => {
     state.show = null;
     state.showConfirm = null;
+    state.showAction = null;
   },
   toggleShell: (state) => {
     state.showShell = !state.showShell;
@@ -17,6 +18,9 @@ const mutations = {
 
     state.show = value.prompt;
     state.showConfirm = value.confirm;
+    if (value.action !== undefined) {
+      state.showAction = value.action;
+    }
   },
   showError: (state) => {
     state.show = "error";

frontend/src/utils/constants.js

@@ -15,7 +15,9 @@ const theme = window.FileBrowser.Theme;
 const enableThumbs = window.FileBrowser.EnableThumbs;
 const resizePreview = window.FileBrowser.ResizePreview;
 const enableExec = window.FileBrowser.EnableExec;
+const tusSettings = window.FileBrowser.TusSettings;
 const origin = window.location.origin;
+const tusEndpoint = `${baseURL}/api/tus`;
 
 export {
   name,
@@ -34,5 +36,7 @@ export {
   enableThumbs,
   resizePreview,
   enableExec,
+  tusSettings,
   origin,
+  tusEndpoint,
 };

frontend/src/views/files/Listing.vue

@@ -696,6 +696,11 @@ export default {
       if (conflict) {
         this.$store.commit("showHover", {
           prompt: "replace",
+          action: (event) => {
+            event.preventDefault();
+            this.$store.commit("closeHovers");
+            upload.handleFiles(files, path, false);
+          },
           confirm: (event) => {
             event.preventDefault();
             this.$store.commit("closeHovers");
@@ -731,6 +736,11 @@ export default {
       if (conflict) {
         this.$store.commit("showHover", {
           prompt: "replace",
+          action: (event) => {
+            event.preventDefault();
+            this.$store.commit("closeHovers");
+            upload.handleFiles(files, path, false);
+          },
           confirm: (event) => {
             event.preventDefault();
             this.$store.commit("closeHovers");

frontend/src/views/settings/Global.vue

@@ -101,6 +101,37 @@
               id="branding-files"
             />
           </p>
+
+          <h3>{{ $t("settings.tusUploads") }}</h3>
+
+          <p class="small">{{ $t("settings.tusUploadsHelp") }}</p>
+
+          <div class="tusConditionalSettings">
+            <p>
+              <label for="tus-chunkSize">{{
+                $t("settings.tusUploadsChunkSize")
+              }}</label>
+              <input
+                class="input input--block"
+                type="text"
+                v-model="formattedChunkSize"
+                id="tus-chunkSize"
+              />
+            </p>
+
+            <p>
+              <label for="tus-retryCount">{{
+                $t("settings.tusUploadsRetryCount")
+              }}</label>
+              <input
+                class="input input--block"
+                type="number"
+                v-model.number="settings.tus.retryCount"
+                id="tus-retryCount"
+                min="0"
+              />
+            </p>
+          </div>
         </div>
 
         <div class="card-action">
@@ -210,11 +241,30 @@ export default {
       error: null,
       originalSettings: null,
       settings: null,
+      debounceTimeout: null,
     };
   },
   computed: {
     ...mapState(["user", "loading"]),
     isExecEnabled: () => enableExec,
+    formattedChunkSize: {
+      get() {
+        return this.formatBytes(this.settings.tus.chunkSize);
+      },
+      set(value) {
+        // Use debouncing to allow the user to type freely without
+        // interruption by the formatter
+        // Clear the previous timeout if it exists
+        if (this.debounceTimeout) {
+          clearTimeout(this.debounceTimeout);
+        }
+
+        // Set a new timeout to apply the format after a short delay
+        this.debounceTimeout = setTimeout(() => {
+          this.settings.tus.chunkSize = this.parseBytes(value);
+        }, 1500);
+      },
+    },
   },
   async created() {
     try {
@@ -275,6 +325,44 @@ export default {
         this.$showError(e);
       }
     },
+    // Parse the user-friendly input (e.g., "20M" or "1T") to bytes
+    parseBytes(input) {
+      const regex = /^(\d+)(\.\d+)?(B|K|KB|M|MB|G|GB|T|TB)?$/i;
+      const matches = input.match(regex);
+      if (matches) {
+        const size = parseFloat(matches[1].concat(matches[2] || ""));
+        let unit = matches[3].toUpperCase();
+        if (!unit.endsWith("B")) {
+          unit += "B";
+        }
+        const units = {
+          KB: 1024,
+          MB: 1024 ** 2,
+          GB: 1024 ** 3,
+          TB: 1024 ** 4,
+        };
+        return size * (units[unit] || 1);
+      } else {
+        return 1024 ** 2;
+      }
+    },
+    // Format the chunk size in bytes to user-friendly format
+    formatBytes(bytes) {
+      const units = ["B", "KB", "MB", "GB", "TB"];
+      let size = bytes;
+      let unitIndex = 0;
+      while (size >= 1024 && unitIndex < units.length - 1) {
+        size /= 1024;
+        unitIndex++;
+      }
+      return `${size}${units[unitIndex]}`;
+    },
+    // Clear the debounce timeout when the component is destroyed
+    beforeDestroy() {
+      if (this.debounceTimeout) {
+        clearTimeout(this.debounceTimeout);
+      }
+    },
   },
 };
 </script>