1 files changed, 20 insertions, 3 deletions
diff --git a/client/faceSearch/faceSearch.query.js b/client/faceSearch/faceSearch.query.js
index 1261269d..8302e437 100644
--- a/client/faceSearch/faceSearch.query.js
+++ b/client/faceSearch/faceSearch.query.js
@@ -2,9 +2,14 @@ import React, { Component } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
+import { Loader } from '../common'
 import * as actions from './faceSearch.actions'
 
 class FaceSearchQuery extends Component {
+  state = {
+    image: null
+  }
+
   upload(e) {
     const { payload } = this.props
     const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
@@ -15,20 +20,32 @@ class FaceSearchQuery extends Component {
       if (file && file.type.match('image.*')) break
     }
     if (!file) return
+    var fr = new FileReader();
+    fr.onload = () => {
+      fr.onload = null
+      this.setState({ image: fr.result })
+    }
+    fr.readAsDataURL(files[0]);
     this.props.actions.upload(this.props.payload, file)
   }
 
   render() {
     const { result } = this.props
+    const { image } = this.state
+    const style = {}
+    if (image) {
+      style.backgroundImage = 'url(' + image + ')'
+      style.backgroundSize = 'cover'
+    }
     return (
       <div className='query row'>
         <div className='uploadContainer'>
         {result.loading ?
-          <div className='loading'>
-            Loading...
+          <div className='loading' style={style}>
+            <Loader />
           </div>
          :
-          <div>
+          <div style={style}>
             <img src="/assets/img/icon_camera.svg" />
             <input
               type="file"