Chunked filed upload

www/app/[domain]/transcripts/fileUploadButton.tsx

@@ -18,24 +18,46 @@ export default function FileUploadButton(props: FileUploadButton) {
     const file = event.target.files?.[0];
 
     if (file) {
-      console.log("Calling api.v1TranscriptRecordUpload()...");
-
-      // Create an object of the expected type
-      const uploadData = {
-        file: file,
-        // Add other properties if required by the type definition
-      };
+      const maxChunkSize = 50 * 1024 * 1024; // 50 MB
+      const totalChunks = Math.ceil(file.size / maxChunkSize);
+      let chunkNumber = 0;
+      let start = 0;
+      let uploadedSize = 0;
 
       api?.httpRequest.config.interceptors.request.use((request) => {
         request.onUploadProgress = (progressEvent) => {
-          setProgress((progressEvent.progress || 0) * 100);
+          const currentProgress = Math.floor(
+            ((uploadedSize + progressEvent.loaded) / file.size) * 100,
+          );
+          setProgress(currentProgress);
         };
         return request;
       });
-      api?.v1TranscriptRecordUpload({
-        transcriptId: props.transcriptId,
-        formData: uploadData,
-      });
+
+      const uploadNextChunk = async () => {
+        if (chunkNumber == totalChunks) return;
+
+        const chunkSize = Math.min(maxChunkSize, file.size - start);
+        const end = start + chunkSize;
+        const chunk = file.slice(start, end);
+
+        await api?.v1TranscriptRecordUpload({
+          transcriptId: props.transcriptId,
+          formData: {
+            chunk,
+          },
+          chunkNumber,
+          totalChunks,
+        });
+
+        uploadedSize += chunkSize;
+        chunkNumber++;
+        start = end;
+
+        uploadNextChunk();
+      };
+
+      uploadNextChunk();
     }
   };
 

www/app/api/schemas.gen.ts

@@ -18,14 +18,14 @@ export const $AudioWaveform = {
 export const $Body_transcript_record_upload_v1_transcripts__transcript_id__record_upload_post =
   {
     properties: {
-      file: {
+      chunk: {
         type: "string",
         format: "binary",
-        title: "File",
+        title: "Chunk",
       },
     },
     type: "object",
-    required: ["file"],
+    required: ["chunk"],
     title:
       "Body_transcript_record_upload_v1_transcripts__transcript_id__record_upload_post",
   } as const;

www/app/api/services.gen.ts

@@ -497,6 +497,8 @@ export class DefaultService {
    * Transcript Record Upload
    * @param data The data for the request.
    * @param data.transcriptId
+   * @param data.chunkNumber
+   * @param data.totalChunks
    * @param data.formData
    * @returns unknown Successful Response
    * @throws ApiError
@@ -510,6 +512,10 @@ export class DefaultService {
       path: {
         transcript_id: data.transcriptId,
       },
+      query: {
+        chunk_number: data.chunkNumber,
+        total_chunks: data.totalChunks,
+      },
       formData: data.formData,
       mediaType: "multipart/form-data",
       errors: {

www/app/api/types.gen.ts

@@ -6,7 +6,7 @@ export type AudioWaveform = {
 
 export type Body_transcript_record_upload_v1_transcripts__transcript_id__record_upload_post =
   {
-    file: Blob | File;
+    chunk: Blob | File;
   };
 
 export type CreateParticipant = {
@@ -296,7 +296,9 @@ export type V1TranscriptMergeSpeakerData = {
 export type V1TranscriptMergeSpeakerResponse = SpeakerAssignmentStatus;
 
 export type V1TranscriptRecordUploadData = {
+  chunkNumber: number;
   formData: Body_transcript_record_upload_v1_transcripts__transcript_id__record_upload_post;
+  totalChunks: number;
   transcriptId: string;
 };