added MakeMultipartRequest for upload endpoints

packages/components/src/api/GetApiHost.ts

@@ -2,7 +2,11 @@
 
 const domainWithoutPort = document.location.host.split(":")[0];
 
-const hostConfig = (host: string, useSsl = true) => ({ host, useSsl });
+const hostConfig = (host: string, useSsl = true) => ({
+  formatUrl: (endpoint = "") => `${ useSsl ? "https" : "http" }://${ host + endpoint }`,
+  host,
+  useSsl,
+});
 
 export default function GetApiHost() {
   switch (domainWithoutPort) {

packages/components/src/api/MakeMultipartRequest.ts

@@ -0,0 +1,33 @@
+import GetApiHost from "./GetApiHost";
+
+const { formatUrl, host = "" } = GetApiHost();
+
+const MakeMultipartRequest = (endpoint = "", body: any) => {
+  const formData = new FormData();
+
+  Object.keys(body).forEach((key) => formData.append(key, body[key]));
+
+  formData.append('source', "file");
+
+  return fetch(formatUrl(endpoint), {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Accept': 'application/json',
+      },
+      body: formData,
+  })
+  .then(res => res.json())
+  .then(res => {
+    if (res && res.success) {
+      return res;
+    } else {
+      return { success : false };
+    }
+  })
+  .catch(e => {
+    return { success : false };
+  });
+}
+
+export default MakeMultipartRequest;

packages/components/src/api/MakeRequest.ts

@@ -1,6 +1,6 @@
 import GetApiHost from "./GetApiHost";
 
-const { host = "", useSsl = true } = GetApiHost();
+const { formatUrl } = GetApiHost();
 
 type UrlRoutingFunction<UrlRouteArgs> = (urlRouteArgs: UrlRouteArgs) => string;
 
@@ -10,11 +10,10 @@ interface RequestHeaders {
 
 interface RouteSetup<UrlRouteArgs> {
     method: string;
+    multipart?: boolean;
     routingFunction: UrlRoutingFunction<UrlRouteArgs>;
 }
 
-const formatUrl = (endpoint = "") => `${ useSsl ? "https" : "http" }://${ host + endpoint }`;
-
 const METHOD_OMITS_BODY : { [key: string] : boolean } = {
     "DELETE": true,
     "GET": true,

packages/components/src/api/voice_designer/voice_dataset_samples/UploadSample.ts

@@ -0,0 +1,16 @@
+import MakeMultipartRequest from "../../MakeMultipartRequest";
+import { FormEvent } from "react";
+
+export interface UploadSampleRequest {
+  uuid_idempotency_token?: string,
+  file: any,
+  dataset_token: string,
+}
+
+export interface UploadSampleResponse {
+  success: boolean
+}
+
+export const UploadSample = (thing = "", request: UploadSampleRequest) => {
+  return MakeMultipartRequest("/v1/voice_designer/sample/upload",request);
+}

packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx

@@ -13,6 +13,8 @@ import { useHistory } from "react-router-dom";
 
 import { v4 as uuidv4 } from "uuid";
 
+import { useFile } from "hooks";
+
 
 import useVoiceRequests from "./useVoiceRequests";
 
@@ -27,6 +29,8 @@ function VoiceDesignerFormPage() {
   const [visibility,visibilitySet] = useState("");
   const [title, titleSet] = useState("");
 
+  const audioProps = useFile({}); // contains upload inout state and controls, see docs
+
   const languages = [
     { value: "en", label: "English" },
     { value: "es", label: "Spanish" },
@@ -59,7 +63,7 @@ function VoiceDesignerFormPage() {
       case 0:
         return <VoiceDetails {...{ datasetInputs }} />;
       case 1:
-        return <UploadSamples />;
+        return <UploadSamples {...{ audioProps, datasetToken: dataset_token }}/>;
       default:
         return null;
     }

packages/fakeyou.com/src/v2/view/pages/voice_designer/components/VoiceDesignerUploadComponent.tsx

@@ -15,9 +15,14 @@ import { v4 as uuidv4 } from "uuid";
 // } from "@storyteller/components/src/api/upload/UploadAudio";
 import useUploadedFiles from "hooks/useUploadedFiles";
 
+import { UploadSample } from "@storyteller/components/src/api/voice_designer/voice_dataset_samples/UploadSample";
+
+// import { DeleteSample } from "@storyteller/components/src/api/voice_designer/voice_dataset_samples/DeleteSample";
+
 const FILE_TYPES = ["MP3", "WAV", "FLAC", "OGG"];
 
 interface Props {
+  datasetToken?: string,
   setMediaUploadToken: (token?: string) => void;
   formIsCleared: boolean;
   setFormIsCleared: (cleared: boolean) => void;
@@ -25,7 +30,7 @@ interface Props {
   changeConvertIdempotencyToken: () => void;
 }
 
-function VoiceDesignerUploadComponent(props: Props) {
+function VoiceDesignerUploadComponent({ changeConvertIdempotencyToken, datasetToken, setCanConvert, setFormIsCleared }: Props) {
   const [isUploadDisabled, setIsUploadDisabled] = useState<boolean>(false);
 
   const files = useUploadedFiles((state: any) => state.files);
@@ -43,9 +48,28 @@ function VoiceDesignerUploadComponent(props: Props) {
       setIdempotencyToken(uuidv4());
       const audioUrl = URL.createObjectURL(file);
       setAudioLinks([...audioLinks, audioUrl ?? ""]);
-      props.setFormIsCleared(false);
-      props.setCanConvert(false);
-      props.changeConvertIdempotencyToken();
+
+
+      // const formData = new FormData();
+
+      // formData.append('uuid_idempotency_token', uuidv4());
+      // formData.append('file', files);
+
+      // console.log("🆘", file);
+
+      // UploadSample("",{
+      //   dataset_token: datasetToken || "",
+      //   file: file,
+      //   uuid_idempotency_token: idempotencyToken,
+      // }).then(res => {
+      //   console.log("😎",res);
+      // });
+
+
+
+      setFormIsCleared(false);
+      setCanConvert(false);
+      changeConvertIdempotencyToken();
       setIsUploadDisabled(false);
     }
   };

packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import VoiceDesignerUploadComponent from "../VoiceDesignerUploadComponent";
 import { v4 as uuidv4 } from "uuid";
 
-function UploadSamples() {
+function UploadSamples({ audioProps, datasetToken }: { audioProps: any, datasetToken?: string }) {
   /* eslint-disable @typescript-eslint/no-unused-vars */
   const [convertLoading, setConvertLoading] = useState(false);
   const [canConvert, setCanConvert] = useState(false);
@@ -25,13 +25,7 @@ function UploadSamples() {
       <div>
         <label className="sub-title">Upload Audio</label>
         <div className="d-flex flex-column gap-3 upload-component">
-          <VoiceDesignerUploadComponent
-            setMediaUploadToken={setMediaUploadToken}
-            formIsCleared={formIsCleared}
-            setFormIsCleared={setFormIsCleared}
-            setCanConvert={setCanConvert}
-            changeConvertIdempotencyToken={changeConvertIdempotencyToken}
-          />
+          <VoiceDesignerUploadComponent {...{ changeConvertIdempotencyToken, datasetToken, formIsCleared, setCanConvert, setFormIsCleared, setMediaUploadToken }}/>
         </div>
       </div>
     </div>