upload works!

vocodes/src/App.scss

@@ -161,9 +161,19 @@ nav {
   min-height: 1.5em;
 }
 
-.video-thumbnail {
-  max-width: 250px;
-  padding: 1em;
+.video-template-selector {
+
+  .video-thumbnail {
+    max-width: 250px;
+    padding: 0em;
+    margin: 1em;
+    filter: brightness(70%) grayscale(1);
+  }
+
+  .selected {
+    filter: brightness(100%) grayscale(0);
+    box-shadow: 0px 0px 25px #209CEE
+  }
 }
 
 #usage,

vocodes/src/modes/video/VideoComponent.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
-import { VIDEO_TEMPLATES } from './Videos';
+import { VIDEO_TEMPLATES, VideoTemplate } from './Videos';
 
 interface Props {
 }
 
 interface State {
+  audioFile?: File,
+  selectedVideoTemplate: VideoTemplate,
 }
 
 class VideoComponent extends React.Component<Props, State> {
@@ -12,23 +14,90 @@ class VideoComponent extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
+      audioFile: undefined,
+      selectedVideoTemplate: VIDEO_TEMPLATES[0],
     };
   }
 
+  handleFileChange = (fileList: FileList|null) => {
+    //const text = (ev.target as ).value;
+    //ev.preventDefault();
+    //return false;
+
+    if (fileList === null 
+        || fileList === undefined
+        || fileList.length < 1) {
+      this.setState({
+        audioFile: undefined,
+      });
+    }
+
+    let file = fileList![0];
+
+    this.setState({
+      audioFile: file,
+    });
+  }
+
+  selectVideoTemplate = (videoTemplate: VideoTemplate) => {
+    this.setState({
+      selectedVideoTemplate: videoTemplate,
+    });
+  }
+
+  handleFormSubmit = (ev: React.FormEvent<HTMLFormElement>) : boolean => {
+    ev.preventDefault();
+
+    if (this.state.audioFile === undefined) {
+      return false;
+    }
+
+    let formData = new FormData();
+    formData.append( 'audio', this.state.audioFile!);
+    formData.append('video-template', this.state.selectedVideoTemplate.slug);
+
+    fetch("http://34.95.89.220/upload", {
+      mode: 'no-cors',
+      method: "POST",
+      body: formData,
+    })
+    .then(function (res) {
+      if (res.ok) {
+        alert("Perfect! ");
+      } else if (res.status == 401) {
+        alert("Oops! ");
+      }
+    }, function (e) {
+      alert("Error submitting form!");
+    });
+
+    return false;
+  }
+
   public render() {
     let thumbnails : any[] = [];
 
     VIDEO_TEMPLATES.forEach(videoTemplate => {
-      
-      const thumbnail = <img
-        className="video-thumbnail"
+      let selectedName = '';
+      if (this.state.selectedVideoTemplate.slug === videoTemplate.slug) {
+        selectedName = 'selected';
+      }
+      let className = `video-thumbnail ${selectedName}`
+      let thumbnail = <img
+        className={className}
         src={videoTemplate.getThumbnailUrl()}
+        onClick={() => this.selectVideoTemplate(videoTemplate) }
         />
 
       thumbnails.push(thumbnail);
-
     });
 
+    let audioFilename = '(select a file)';
+
+    if (this.state.audioFile !== undefined) {
+      audioFilename = this.state.audioFile.name;
+    }
+
     return (
       <div className="content is-4 is-size-5">
         <h1 className="title is-3"> Deep Fake Video Beta </h1>
@@ -40,12 +109,17 @@ class VideoComponent extends React.Component<Props, State> {
           </p>
         </div>
 
-        <form action="#">
+        <form onSubmit={this.handleFormSubmit}>
 
           <div className="upload-box">
             <div className="file has-name is-boxed is-large">
               <label className="file-label">
-                <input className="file-input" type="file" name="audio" />
+                <input 
+                  type="file" 
+                  name="audio" 
+                  className="file-input" 
+                  onChange={ (e) => this.handleFileChange(e.target.files) }
+                  />
                 <span className="file-cta">
                   <span className="file-icon">
                     <i className="fas fa-upload"></i>
@@ -55,7 +129,7 @@ class VideoComponent extends React.Component<Props, State> {
                   </span>
                 </span>
                 <span className="file-name">
-                  Screen Shot 2017-07-29 at 15.54.25.png
+                  {audioFilename}
                 </span>
               </label>
             </div>
@@ -86,6 +160,12 @@ class VideoComponent extends React.Component<Props, State> {
             currently on a limited trial account (I was previously on Digital Ocean).
             Expect this to lag during peak traffic until I get more GPUs.
           </p>
+          <p>
+            Do not defame, defraud, or use for commercial purposes. Deep fakes
+            are for memes. The more people see deep fakes, the more they learn to
+            recognize them. It's your privilege to help educate the world about 
+            deep fakes. Have fun, go crazy.
+          </p>
         </div>
       </div>
     )