From 485f0ad2e9b01a4db45cf006a06c7e04f4348f81 Mon Sep 17 00:00:00 2001
From: Koper <andreas@monadical.com>
Date: Tue, 26 Dec 2023 21:22:24 +0700
Subject: [PATCH] Experimental code - Upload file feature

---
 .../[transcriptId]/record/page.tsx            |  1 +
 .../[domain]/transcripts/fileUploadButton.tsx | 51 +++++++++++++++++++
 www/app/[domain]/transcripts/recorder.tsx     |  7 +++
 3 files changed, 59 insertions(+)
 create mode 100644 www/app/[domain]/transcripts/fileUploadButton.tsx

diff --git a/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx b/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx
index 8615a4b1..ce1ee48c 100644
--- a/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx
+++ b/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx
@@ -112,6 +112,7 @@ const TranscriptRecord = (details: TranscriptDetails) => {
           }}
           getAudioStream={getAudioStream}
           audioDevices={audioDevices}
+          transcriptId={details.params.transcriptId}
         />
       )}
 
diff --git a/www/app/[domain]/transcripts/fileUploadButton.tsx b/www/app/[domain]/transcripts/fileUploadButton.tsx
new file mode 100644
index 00000000..112ea6eb
--- /dev/null
+++ b/www/app/[domain]/transcripts/fileUploadButton.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import useApi from "../../lib/useApi";
+import { Body_transcript_record_upload_v1_transcripts__transcript_id__record_upload_post } from "../../api";
+
+type FileUploadButton = {
+  transcriptId: string;
+};
+
+export default function FileUploadButton(props: FileUploadButton) {
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+  const api = useApi();
+
+  const triggerFileUpload = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+
+    if (file) {
+      console.log("Calling api.v1TranscriptRecordUpload()...");
+
+      // Create an object of the expected type
+      const uploadData: Body_transcript_record_upload_v1_transcripts__transcript_id__record_upload_post =
+        {
+          file: file,
+          // Add other properties if required by the type definition
+        };
+
+      api?.v1TranscriptRecordUpload(props.transcriptId, uploadData);
+    }
+  };
+
+  return (
+    <>
+      <button
+        className="bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white ml-2 md:ml:4 md:h-[78px] md:min-w-[100px] text-lg"
+        onClick={triggerFileUpload}
+      >
+        Upload File
+      </button>
+
+      <input
+        type="file"
+        ref={fileInputRef}
+        style={{ display: "none" }}
+        onChange={handleFileUpload}
+      />
+    </>
+  );
+}
diff --git a/www/app/[domain]/transcripts/recorder.tsx b/www/app/[domain]/transcripts/recorder.tsx
index e7c016a7..562f6a76 100644
--- a/www/app/[domain]/transcripts/recorder.tsx
+++ b/www/app/[domain]/transcripts/recorder.tsx
@@ -12,6 +12,7 @@ import AudioInputsDropdown from "./audioInputsDropdown";
 import { Option } from "react-dropdown";
 import { waveSurferStyles } from "../../styles/recorder";
 import { useError } from "../../(errors)/errorContext";
+import FileUploadButton from "./fileUploadButton";
 
 type RecorderProps = {
   setStream: React.Dispatch<React.SetStateAction<MediaStream | null>>;
@@ -19,6 +20,7 @@ type RecorderProps = {
   onRecord?: () => void;
   getAudioStream: (deviceId) => Promise<MediaStream | null>;
   audioDevices: Option[];
+  transcriptId: string;
 };
 
 export default function Recorder(props: RecorderProps) {
@@ -307,6 +309,11 @@ export default function Recorder(props: RecorderProps) {
           >
             {isRecording ? "Stop" : "Record"}
           </button>
+
+          <FileUploadButton
+            transcriptId={props.transcriptId}
+          ></FileUploadButton>
+
           {!isRecording && (
             <button
               className={`${