Separate upload file and record pages

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

@@ -1,16 +1,15 @@
-import React from "react";
+import React, { useState } from "react";
 import useApi from "../../lib/useApi";
-import { Button } from "@chakra-ui/react";
+import { Button, CircularProgress } from "@chakra-ui/react";
 
 type FileUploadButton = {
   transcriptId: string;
-  disabled?: boolean;
 };
 
 export default function FileUploadButton(props: FileUploadButton) {
   const fileInputRef = React.useRef<HTMLInputElement>(null);
   const api = useApi();
-
+  const [progress, setProgress] = useState(0);
   const triggerFileUpload = () => {
     fileInputRef.current?.click();
   };
@@ -27,6 +26,12 @@ export default function FileUploadButton(props: FileUploadButton) {
         // Add other properties if required by the type definition
       };
 
+      api?.httpRequest.config.interceptors.request.use((request) => {
+        request.onUploadProgress = (progressEvent) => {
+          setProgress((progressEvent.progress || 0) * 100);
+        };
+        return request;
+      });
       api?.v1TranscriptRecordUpload({
         transcriptId: props.transcriptId,
         formData: uploadData,
@@ -40,9 +45,16 @@ export default function FileUploadButton(props: FileUploadButton) {
         onClick={triggerFileUpload}
         colorScheme="blue"
         mr={2}
-        isDisabled={props.disabled}
+        isDisabled={progress > 0}
       >
-        Upload File
+        {progress > 0 && progress < 100 ? (
+          <>
+            Uploading...&nbsp;
+            <CircularProgress size="20px" value={progress} />
+          </>
+        ) : (
+          <>Select File</>
+        )}
       </Button>
 
       <input