1 files changed, 73 insertions, 0 deletions
diff --git a/client/faceSearch/faceSearch.query.js b/client/faceSearch/faceSearch.query.js
new file mode 100644
index 00000000..9313c538
--- /dev/null
+++ b/client/faceSearch/faceSearch.query.js
@@ -0,0 +1,73 @@
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import * as actions from './faceSearch.actions'
+
+class FaceSearchQuery extends Component {
+  upload(e) {
+    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
+    let i
+    let file
+    for (i = 0; i < files.length; i++) {
+      file = files[i]
+      if (file && file.type.match('image.*')) break
+    }
+    if (!file) return
+    this.props.actions.upload(file)
+  }
+
+  render() {
+    const { result } = this.props
+    return (
+      <div className='query row'>
+        <div className='uploadContainer'>
+        {result.loading ?
+          <div className='loading'>
+            Loading...
+          </div>
+         :
+          <div>
+            <img src="/assets/img/icon_camera.svg" />
+            <input
+              type="file"
+              name="img"
+              accept="image/*"
+              onChange={this.upload.bind(this)}
+              required
+            />
+          </div>
+        }
+        </div>
+        <div class='cta'>
+          <h2>Search This Dataset</h2>
+          <h3>Searching {13456} images</h3>
+          <p>
+            Use facial recognition to reverse search into the LFW dataset and see if it contains your photos.
+          </p>
+          <ol>
+          <li>Upload a photo of yourself</li>
+          <li>Use a photo similar to examples below</li>
+          <li>Only matches over 85% will be displayed</li>
+          <li>Read more tips to improve search results</li>
+          <li>Your search data is never stored and immediately cleared once you leave this page.</li>
+          </ol>
+          <p>
+            Read more about <a href='/about/privacy/'>privacy</a>.
+          </p>
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  result: state.faceSearch.result,
+  options: state.faceSearch.options,
+})
+
+const mapDispatchToProps = dispatch => ({
+  actions: bindActionCreators({ ...actions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(FaceSearchQuery)