diff --git a/packages/components/src/api/upload/UploadVideo.ts b/packages/components/src/api/upload/UploadVideo.ts
new file mode 100644
index 0000000000..36ee999234
--- /dev/null
+++ b/packages/components/src/api/upload/UploadVideo.ts
@@ -0,0 +1,60 @@
+import { ApiConfig } from "../ApiConfig";
+
+export interface UploadVideoRequest {
+  uuid_idempotency_token: string,
+  source?: string, // eg. "device", "file"
+  file: any,
+}
+
+export interface UploadVideoSuccessResponse {
+  success: boolean,
+  upload_token: string,
+}
+
+export interface UploadVideoErrorResponse {
+  success: boolean,
+}
+
+type UploadVideoResponse = UploadVideoSuccessResponse | UploadVideoErrorResponse;
+
+export function UploadVideoIsOk(response: UploadVideoResponse): response is UploadVideoSuccessResponse {
+  return response?.success === true;
+}
+
+export function UploadVideoIsError(response: UploadVideoResponse): response is UploadVideoErrorResponse {
+  return response?.success === false;
+}
+
+export async function UploadVideo(request: UploadVideoRequest) : Promise<UploadVideoResponse> 
+{
+  const endpoint = new ApiConfig().uploadVideo();
+  
+  const formData = new FormData();
+
+  formData.append('uuid_idempotency_token', request.uuid_idempotency_token);
+  formData.append('file', request.file);
+
+  if (request.source !== undefined) {
+    formData.append('source', request.source);
+  }
+
+  return fetch(endpoint, {
+    method: 'POST',
+    credentials: 'include',
+    headers: {
+      'Accept': 'application/json',
+    },
+    body: formData,
+  })
+  .then(res => res.json())
+  .then(res => {
+    if (res && 'success' in res) {
+      return res;
+    } else {
+      return { success : false };
+    }
+  })
+  .catch(e => {
+    return { success : false };
+  });
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/UploadFieldVideo.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/VideoInput/VideoInput.tsx
similarity index 85%
rename from packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/UploadFieldVideo.tsx
rename to packages/fakeyou.com/src/v2/view/pages/video_mocap/components/VideoInput/VideoInput.tsx
index 31d1e2789c..7fb07a1270 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/UploadFieldVideo.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/VideoInput/VideoInput.tsx
@@ -1,11 +1,11 @@
-import React, { useState } from "react";
-import { a, useSpring } from '@react-spring/web';
+import React from "react";
+import { useSpring } from '@react-spring/web';
 import { FileDetails, FileWrapper, FileLabel } from "components/common";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFileVideo, faVideo } from "@fortawesome/pro-solid-svg-icons";
 import "./style.scss";
 
 interface Props {
+  //blob, clear, file, inputProps comes from file
   blob?: string,
   clear?: (file?: any) => void,
   file?: any,
@@ -32,8 +32,7 @@ export default function UploadFieldVideo({
   working = false,
   ...rest }: Props)
 {
-  const [loaded,loadedSet] = useState<number>();
-  const onLoad = () => loadedSet(1);
+
   const style = useSpring({
     config: { mass: 1, tension: 120, friction: 14 },
     onRest
@@ -46,14 +45,17 @@ export default function UploadFieldVideo({
       { file ?
         <>
           <FileDetails
-            className="position-absolute"
+            className="
+              position-absolute top-0
+              d-flex w-100 p-3
+            "
             {...{ clear, file, hideClearDetails, icon: faFileVideo }}
           />
           <video
             controls
             src={blob}
             className="mh-100 mw-100 object-fit-cover"
-            {...{onLoad, style}}
+            {...{onLoadStart:onRest, style}}
           />
           
         </> :
@@ -65,6 +67,7 @@ export default function UploadFieldVideo({
             " 
             {...{ fileTypes }}
           />
+          {/* this is the fontAwesome faVideo */}
           <svg className="fill-secondary" xmlns="http://www.w3.org/2000/svg" height="160" width="200" viewBox="0 0 576 512"><path d="M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2V384c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1V320 192 174.9l14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z"/></svg>
         </>
       }
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/VideoInput/index.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/VideoInput/index.tsx
new file mode 100644
index 0000000000..fdda428264
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/VideoInput/index.tsx
@@ -0,0 +1 @@
+export { default } from './VideoInput';
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/style.scss b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/VideoInput/style.scss
similarity index 100%
rename from packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/style.scss
rename to packages/fakeyou.com/src/v2/view/pages/video_mocap/components/VideoInput/style.scss
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentUpload.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentUpload.tsx
index 0cadc513f7..99d5df5645 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentUpload.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentUpload.tsx
@@ -2,14 +2,14 @@ import React, {useState} from "react";
 
 import { useFile } from "hooks";
 
-import VideoInput from "v2/view/pages/video_mocap/components/uploadFieldVideo";
+import VideoInput from "v2/view/pages/video_mocap/components/VideoInput";
 
 export default function TabContentUpload(props:{
   t: Function
 }){
   const { t } = props
   const videoProps = useFile({})
-  const [videoReady, videoReadySet] = useState<boolean>(false);
+  const [videoReady, setVideoReady] = useState<boolean>(false);
 
   // contains upload inout state and controls, see docs
   return(
@@ -20,7 +20,7 @@ export default function TabContentUpload(props:{
         <div className="row">
           <div className="col-12">
             <VideoInput {...{ ...t, ...videoProps,
-              onRest: () => videoReadySet(videoProps.file ? true : false),
+              onRest: () => setVideoReady(videoProps.file ? true:false),
             }}/>
           </div>
         </div>
@@ -28,7 +28,10 @@ export default function TabContentUpload(props:{
         <div className="row py-3">
           <div className="col-12">
             <div className="d-flex justify-content-end gap-3">
-              <button className="btn btn-primary">{t("button.upload")}</button>
+              <button
+                className="btn btn-primary"
+                disabled={!videoReady}
+              >{t("button.upload")}</button>
               <button className="btn btn-primary" disabled>{t("button.generate")}</button>
             </div>
           </div>
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/index.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/index.tsx
deleted file mode 100644
index 6fc6485cc2..0000000000
--- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './UploadFieldVideo';
\ No newline at end of file