Layer tus-js-client on top of Axios

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,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 { 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 @@
 }
 
 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 @@
                 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 @@
             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;
@@ -252,7 +244,7 @@
     return new ServerError(message, 0);
 }
 
 function prepareData(details) {
     const data = new FormData();
     for (const [key, value] of Object.entries(details)) {
         if (Array.isArray(value)) {
@@ -294,7 +286,7 @@
             return requestId++;
         }
 
         async function get(url: string, requestConfig) {
             return new Promise((resolve, reject) => {
                 const newRequestId = getRequestId();
                 requests[newRequestId] = { resolve, reject };
@@ -849,7 +841,7 @@
             save_images: saveImages,
         };
         return new Promise<string | void>((resolve, reject) => {
             async function request() {
                 Axios.post(baseURL, {}, {
                     params,
                 })
@@ -941,7 +933,7 @@
     const url = `${backendAPI}/tasks/${id}/backup/export`;
 
     return new Promise<string | void>((resolve, reject) => {
         async function request() {
             try {
                 const response = await Axios.post(url, {}, {
                     params,
@@ -1020,7 +1012,7 @@
     const url = `${backendAPI}/projects/${id}/backup/export`;
 
     return new Promise<string | void>((resolve, reject) => {
         async function request() {
             try {
                 const response = await Axios.post(url, {}, {
                     params,
@@ -1145,7 +1137,7 @@
         message: 'CVAT is uploading task data to the server',
     }));
 
     async function bulkUpload(taskId, files) {
         const fileBulks = files.reduce((fileGroups, file) => {
             const lastBulk = fileGroups[fileGroups.length - 1];
             if (chunkSize - lastBulk.size >= file.size) {

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):