Enhance upload functionality and refactor API integration

- Updated the Upload component to utilize useOutletContext for improved context management.
- Refactored MultipartUpload to accept requestConfig as a parameter, enhancing API request handling.
- Streamlined error handling in MD5WorkerManager and MultipartUpload for clearer feedback during upload processes.
- Removed deprecated error handling patterns and improved type safety across upload-related functions.
- Cleaned up imports and organized code for better readability and maintainability.

Author: Oksamies

apps/cyberstorm-remix/app/upload/upload.tsx

@@ -35,7 +35,7 @@ import {
 import { UserMedia } from "@thunderstore/ts-uploader/src/client/types";
 import { DapperTs } from "@thunderstore/dapper-ts";
 import { MetaFunction } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
+import { useLoaderData, useOutletContext } from "@remix-run/react";
 // import {
 //   packageSubmissionErrorSchema,
 //   packageSubmissionStatusSchema,
@@ -49,6 +49,7 @@ import {
   packageSubmissionErrorSchema,
   packageSubmissionStatusSchema,
 } from "@thunderstore/thunderstore-api";
+import { OutletContextShape } from "../root";
 
 interface CommunityOption {
   value: string;
@@ -88,6 +89,9 @@ export async function clientLoader() {
 export default function Upload() {
   const uploadData = useLoaderData<typeof loader | typeof clientLoader>();
 
+  const outletContext = useOutletContext() as OutletContextShape;
+  const requestConfig = outletContext.requestConfig;
+
   const communityOptions: CommunityOption[] = [];
   const [categoryOptions, setCategoryOptions] = useState<
     { communityId: string; categories: CategoryOption[] }[]
@@ -164,15 +168,12 @@ export default function Upload() {
       if (!config.apiHost) {
         throw new Error("API host is not configured");
       }
-      const upload = new MultipartUpload({
-        file,
-        api: {
-          domain: config.apiHost,
-          authorization: config.sessionId
-            ? `Session ${config.sessionId}`
-            : undefined,
+      const upload = new MultipartUpload(
+        {
+          file,
         },
-      });
+        requestConfig
+      );
 
       setLock(true);
       setHandle(upload);

packages/ts-uploader/src/client/endpoints.ts

@@ -1,29 +1,14 @@
+import { RequestConfig } from "@thunderstore/thunderstore-api";
 import {
   UserMedia,
   InitUploadResponse,
   FinishUploadRequest,
   InitUploadRequest,
 } from "./types";
 import { UsermediaUrls } from "./urls";
-import { apiFetch } from "./fetch";
-import { ApiConfig } from "./config";
-
-type RequestConfig = {
-  path: string;
-  data?: object;
-};
-async function apiPost<T>(api: ApiConfig, request: RequestConfig) {
-  const response = await apiFetch({
-    url: `${api.domain}${request.path}`,
-    data: request.data,
-    authorization: api.authorization,
-    method: "POST",
-  });
-  return (await response.json()) as T;
-}
 
 type ApiCall<Req = undefined, Res = undefined, Args = object> = (
-  api: ApiConfig,
+  requestConfig: RequestConfig,
   args: {
     data: Req;
   } & Args

packages/ts-uploader/src/state/BaseUpload.ts

@@ -8,7 +8,6 @@ import {
   UploadProgress,
   UploadStatus,
 } from "./types";
-import { RequestConfig } from "@thunderstore/thunderstore-api";
 
 export abstract class BaseUpload implements IBaseUploadHandle {
   protected status: UploadStatus = "not_started";
@@ -24,14 +23,13 @@ export abstract class BaseUpload implements IBaseUploadHandle {
   protected error?: UploadError;
   protected partsProgress: { [key: string]: UploadPartProgress } = {};
   protected config: UploadConfig;
-  protected requestConfig: RequestConfig;
   protected isAborted = false;
 
   readonly onProgress = new TypedEventEmitter<UploadProgress>();
   readonly onStatusChange = new TypedEventEmitter<UploadStatus>();
   readonly onError = new TypedEventEmitter<UploadError>();
 
-  constructor(config: UploadConfig = {}, requestConfig: RequestConfig = {}) {
+  constructor(config: UploadConfig = {}) {
     this.config = {
       maxRetries: 3,
       retryDelay: 1000,
@@ -40,7 +38,6 @@ export abstract class BaseUpload implements IBaseUploadHandle {
       timeout: 30000,
       ...config,
     };
-    this.requestConfig = requestConfig;
   }
 
   get progress(): UploadProgress {

packages/ts-uploader/src/state/MultipartUpload.ts

@@ -1,21 +1,16 @@
 import { UserMedia } from "../client/types";
-import { UsermediaEndpoints } from "../client/endpoints";
-import { ApiConfig } from "../client/config";
 import { TypedEventEmitter } from "@thunderstore/typed-event-emitter";
 import { BaseUpload } from "./BaseUpload";
 import { UploadConfig, UploadProgress } from "./types";
+import { getMD5WorkerManager, MD5WorkerManager } from "../workers";
 import {
-  getMD5WorkerManager,
-  MD5WorkerManager,
-  MD5WorkerManagerError,
-} from "../workers";
-import {
+  postUsermediaAbort,
   postUsermediaFinish,
   postUsermediaInitiate,
+  RequestConfig,
 } from "@thunderstore/thunderstore-api";
 
 export type MultiPartUploadOptions = {
-  api: ApiConfig;
   file: File;
   maxConcurrentParts?: number;
   bandwidthLimit?: number;
@@ -48,7 +43,6 @@ export interface IUploadHandle {
 
 export class MultipartUpload extends BaseUpload {
   private file: File;
-  private api: ApiConfig;
   private parts: UploadPart[] = [];
   private partStates: {
     [key: string]: {
@@ -70,13 +64,18 @@ export class MultipartUpload extends BaseUpload {
   // private completedParts: { ETag: string; PartNumber: number }[] = [];
   private handle?: UserMedia;
   private md5WorkerManager: MD5WorkerManager;
+  private requestConfig: () => RequestConfig;
 
-  constructor(options: MultiPartUploadOptions, config?: UploadConfig) {
+  constructor(
+    options: MultiPartUploadOptions,
+    requestConfig: () => RequestConfig,
+    config?: UploadConfig
+  ) {
     super(config);
     this.file = options.file;
-    this.api = options.api;
     this.metrics.totalBytes = this.file.size;
     this.md5WorkerManager = getMD5WorkerManager();
+    this.requestConfig = requestConfig;
   }
 
   get uploadHandle(): UserMedia | undefined {
@@ -101,19 +100,23 @@ export class MultipartUpload extends BaseUpload {
       this.metrics.startTime = Date.now();
       this.metrics.lastUpdateTime = this.metrics.startTime;
 
+      console.log("requestConfig", this.requestConfig);
+
       // Initialize upload
       const initiateResult = await postUsermediaInitiate({
-        config: () => this.requestConfig,
+        config: this.requestConfig,
         params: {},
         data: {
           filename: this.file.name,
           file_size_bytes: this.file.size,
         },
         queryParams: {},
+        useSession: true,
       });
 
       this.handle = initiateResult.user_media;
 
+      console.log("initiateResult", initiateResult);
       // Create parts
       this.parts = initiateResult.upload_urls.map((x) => ({
         payload: this.slicePart(x.offset, x.length),
@@ -123,8 +126,11 @@ export class MultipartUpload extends BaseUpload {
         },
       }));
 
+      console.log("parts", this.parts);
+
       // Prepare parts
-      for (let i = 0; i < this.parts.length; i) {
+      for (let i = 0; i < this.parts.length; i++) {
+        console.log("part", this.parts[i]);
         const uniqueId = `${this.handle.uuid}-${this.parts[i].meta.part_number}`;
         this.partStates[uniqueId] = {
           part: this.parts[i],
@@ -145,13 +151,15 @@ export class MultipartUpload extends BaseUpload {
           if (!this.handle) {
             throw new Error("Upload handle not found");
           }
+          console.log("uploading part", part);
           this.onGoingUploads.push(
             this.uploadPart(
               `${this.handle.uuid}-${part.meta.part_number}`,
               part,
               this.md5WorkerManager
             )
           );
+          console.log("onGoingUploads", this.onGoingUploads);
         });
         await Promise.all(this.onGoingUploads);
       }
@@ -176,28 +184,28 @@ export class MultipartUpload extends BaseUpload {
 
       // Complete upload
       const finishResult = await postUsermediaFinish({
-        config: () => this.requestConfig,
+        config: this.requestConfig,
         params: {
           uuid: this.handle.uuid,
         },
         data: {
           parts: completeParts,
         },
         queryParams: {},
+        useSession: true,
       });
 
       this.handle = finishResult;
 
       this.setStatus("complete");
     } catch (error) {
-      if (error instanceof Error) {
-        this.setError({
-          code: "UPLOAD_FAILED",
-          message: error.message,
-          retryable: true,
-          details: error,
-        });
-      }
+      console.log("error", error);
+      this.setError({
+        code: "UPLOAD_FAILED",
+        message: error.message,
+        retryable: true,
+        details: error,
+      });
       this.setStatus("failed");
     }
   }
@@ -212,10 +220,6 @@ export class MultipartUpload extends BaseUpload {
       part.payload
     );
 
-    if (checksum instanceof MD5WorkerManagerError) {
-      throw checksum;
-    }
-
     this.partStates[uniqueId] = {
       part,
       uniqueId,
@@ -307,9 +311,14 @@ export class MultipartUpload extends BaseUpload {
     }
     // TODO: This should probably change some status to aborted, so that the
     // frontend can show that the upload was aborted.
-    await UsermediaEndpoints.abort(this.api, {
-      uuid: this.handle.uuid,
-      data: undefined,
+    await postUsermediaAbort({
+      config: this.requestConfig,
+      params: {
+        uuid: this.handle.uuid,
+      },
+      data: {},
+      queryParams: {},
+      useSession: true,
     });
   }
 

packages/ts-uploader/src/workers/MD5WorkerManager.ts

@@ -10,18 +10,6 @@ export type MD5ErrorEvent = {
   uniqueId: string;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-interface MD5WorkerManagerError extends Error {}
-
-interface MD5WorkerManagerErrorConstructor extends ErrorConstructor {
-  new (message?: string): MD5WorkerManagerError;
-  (message?: string): MD5WorkerManagerError;
-  readonly prototype: MD5WorkerManagerError;
-}
-
-// eslint-disable-next-line no-var
-export var MD5WorkerManagerError: MD5WorkerManagerErrorConstructor;
-
 export class MD5WorkerManager {
   private workers: Worker[] = [];
   private isInitialized = false;
@@ -50,14 +38,9 @@ export class MD5WorkerManager {
     this.isInitialized = false;
   }
 
-  calculateMD5(
-    uniqueId: string,
-    data: Blob
-  ): Promise<string | MD5WorkerManagerError> {
+  calculateMD5(uniqueId: string, data: Blob): Promise<string> {
     if (!this.isInitialized) {
-      return Promise.reject(
-        new MD5WorkerManagerError("MD5 worker not initialized")
-      );
+      throw new Error("MD5 worker not initialized");
     }
 
     let worker: Worker | null = null;
@@ -68,31 +51,24 @@ export class MD5WorkerManager {
         type: "module",
       });
       if (!worker) {
-        return Promise.reject(
-          new MD5WorkerManagerError("Failed to create MD5 worker")
-        );
+        throw new Error("Failed to create MD5 worker");
       }
       this.workers.push(worker);
     } catch (error) {
-      return Promise.reject(
-        new MD5WorkerManagerError(`Failed to initialize MD5 worker: ${error}`)
-      );
+      throw new Error(`Failed to initialize MD5 worker: ${error}`);
     }
 
-    return new Promise((resolve, reject) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    return new Promise((resolve, _reject) => {
       worker!.onmessage = (event: MessageEvent) => {
         const typeCastedEvent = event.data as MD5CompleteEvent | MD5ErrorEvent;
         if (typeCastedEvent.uniqueId === uniqueId) {
           if (typeCastedEvent.type === "complete") {
             resolve(typeCastedEvent.md5);
           } else if (typeCastedEvent.type === "error") {
-            reject(
-              new MD5WorkerManagerError(
-                `MD5 worker error: ${typeCastedEvent.error}`
-              )
-            );
+            throw new Error(`MD5 worker error: ${typeCastedEvent.error}`);
           } else {
-            reject(new MD5WorkerManagerError("Unknown event type"));
+            throw new Error("Unknown event type");
           }
         }
       };

packages/ts-uploader/src/workers/index.ts

@@ -1,2 +1,2 @@
-export { MD5WorkerManager, MD5WorkerManagerError } from "./MD5WorkerManager";
+export { MD5WorkerManager } from "./MD5WorkerManager";
 export { getMD5WorkerManager, terminateWorkers } from "./workerUtils";