Layer tus-js-client on top of Axios (#8281)

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/src/axios-tus.ts

@@ -0,0 +1,87 @@
+// 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 | undefined {
+        return this.#axiosResponse.headers[header.toLowerCase()];
+    }
+    getBody(): string {
+        return this.#axiosResponse.data;
+    }
+    getUnderlyingObject(): AxiosResponse {
+        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,
+            validateStatus: () => true,
+        };
+    }
+
+    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(): AxiosRequestConfig {
+        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;

cvat/apps/engine/mixins.py

@@ -14,6 +14,7 @@
 from unittest import mock
 from textwrap import dedent
 from typing import Optional, Callable, Dict, Any, Mapping
+from urllib.parse import urljoin
 
 import django_rq
 from attr.converters import to_bool
@@ -315,7 +316,7 @@ def init_tus_upload(self, request):
 
             return self._tus_response(
                 status=status.HTTP_201_CREATED,
-                extra_headers={'Location': '{}{}'.format(location, tus_file.file_id),
+                extra_headers={'Location': urljoin(location, tus_file.file_id),
                                'Upload-Filename': tus_file.filename})
 
     def append_tus_chunk(self, request, file_id):