Layer tus-js-client on top of Axios

This ensures that requests coming from tus-js-client have the same defaults
as the ones coming from the rest of the UI. In particular, this ensures that
TUS requests include the `X-CSRFTOKEN` header.

Currently, this doesn't matter much, because TUS requests are authenticated
using the token. However, I'd like to get rid of token authentication in the
UI, after which `X-CSRFTOKEN` will become important.

Author: SpecLad

cvat-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-core",
-  "version": "15.1.0",
+  "version": "15.1.1",
   "type": "module",
   "description": "Part of Computer Vision Tool which presents an interface for client-side integration",
   "main": "src/api.ts",

cvat-core/src/axios-tus.ts

@@ -0,0 +1,65 @@
+// Copyright (C) 2024 CVAT.ai Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import Axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
+import * as tus from 'tus-js-client';
+
+class AxiosHttpResponse implements tus.HttpResponse {
+    readonly #axiosResponse: AxiosResponse;
+
+    constructor(axiosResponse: AxiosResponse) {
+        this.#axiosResponse = axiosResponse;
+    }
+
+    getStatus(): number { return this.#axiosResponse.status; }
+    getHeader(header: string): string { return this.#axiosResponse.headers[header.toLowerCase()]; }
+    getBody(): string { return this.#axiosResponse.data; }
+    getUnderlyingObject(): any { return this.#axiosResponse; }
+}
+
+class AxiosHttpRequest implements tus.HttpRequest {
+    readonly #axiosConfig: AxiosRequestConfig;
+    readonly #abortController: AbortController;
+
+    constructor(method: string, url: string) {
+        this.#abortController = new AbortController();
+        this.#axiosConfig = {
+            method, url, headers: {}, signal: this.#abortController.signal,
+        };
+    }
+
+    getMethod(): string { return this.#axiosConfig.method; }
+    getURL(): string { return this.#axiosConfig.url; }
+
+    setHeader(header: string, value: string): void {
+        this.#axiosConfig.headers[header.toLowerCase()] = value;
+    }
+    getHeader(header: string): string | undefined {
+        return this.#axiosConfig.headers[header.toLowerCase()];
+    }
+
+    setProgressHandler(handler: (bytesSent: number) => void): void {
+        this.#axiosConfig.onUploadProgress = (progressEvent) => {
+            handler(progressEvent.loaded);
+        };
+    }
+
+    async send(body: any): Promise<tus.HttpResponse> {
+        const axiosResponse = await Axios({ ...this.#axiosConfig, data: body });
+        return new AxiosHttpResponse(axiosResponse);
+    }
+
+    async abort(): Promise<void> { this.#abortController.abort(); }
+
+    getUnderlyingObject(): any { return this.#axiosConfig; }
+}
+
+class AxiosHttpStack implements tus.HttpStack {
+    createRequest(method: string, url: string): tus.HttpRequest {
+        return new AxiosHttpRequest(method, url);
+    }
+    getName(): string { return 'AxiosHttpStack'; }
+}
+
+export const axiosTusHttpStack = new AxiosHttpStack();

cvat-core/src/server-proxy.ts

@@ -10,6 +10,7 @@ import * as tus from 'tus-js-client';
 import { ChunkQuality } from 'cvat-data';
 
 import './axios-config';
+import { axiosTusHttpStack } from './axios-tus';
 import {
     SerializedLabel, SerializedAnnotationFormats, ProjectsFilter,
     SerializedProject, SerializedTask, TasksFilter, SerializedUser, SerializedOrganization,
@@ -117,7 +118,6 @@ function fetchAll(url, filter = {}): Promise<any> {
 }
 
 async function chunkUpload(file: File, uploadConfig): Promise<{ uploadSentSize: number; filename: string }> {
-    const params = enableOrganization();
     const {
         endpoint, chunkSize, totalSize, onUpdate, metadata, totalSentSize,
     } = uploadConfig;
@@ -130,9 +130,7 @@ async function chunkUpload(file: File, uploadConfig): Promise<{ uploadSentSize:
                 filetype: file.type,
                 ...metadata,
             },
-            headers: {
-                Authorization: Axios.defaults.headers.common.Authorization,
-            },
+            httpStack: axiosTusHttpStack,
             chunkSize,
             retryDelays: [2000, 4000, 8000, 16000, 32000, 64000],
             onShouldRetry(err: tus.DetailedError | Error): boolean {
@@ -151,12 +149,6 @@ async function chunkUpload(file: File, uploadConfig): Promise<{ uploadSentSize:
             onError(error) {
                 reject(error);
             },
-            onBeforeRequest(req) {
-                const xhr = req.getUnderlyingObject();
-                const { org } = params;
-                req.setHeader('X-Organization', org);
-                xhr.withCredentials = true;
-            },
             onProgress(bytesUploaded) {
                 if (onUpdate && Number.isInteger(totalSentSize) && Number.isInteger(totalSize)) {
                     const currentUploadedSize = totalSentSize + bytesUploaded;