diff options
Diffstat (limited to 'client/faceSearch/faceSearch.query.js')
| -rw-r--r-- | client/faceSearch/faceSearch.query.js | 42 |
1 files changed, 10 insertions, 32 deletions
diff --git a/client/faceSearch/faceSearch.query.js b/client/faceSearch/faceSearch.query.js index 9f778ca0..2d140813 100644 --- a/client/faceSearch/faceSearch.query.js +++ b/client/faceSearch/faceSearch.query.js @@ -2,7 +2,7 @@ import React, { Component } from 'react' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' -import { Loader } from '../common' +import { Loader, UploadImage } from '../common' import * as actions from './faceSearch.actions' // function parse_bbox(s) { @@ -18,23 +18,8 @@ class FaceSearchQuery extends Component { image: null } - upload(e) { - const { payload } = this.props - 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 - const 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) + upload(blob) { + this.props.actions.upload(this.props.payload, blob) } render() { @@ -50,22 +35,15 @@ class FaceSearchQuery extends Component { return ( <div className='query row'> <div className='uploadContainer'> - {result.loading ? - <div className='loading' style={style}> - <Loader /> - </div> - : <div style={style}> + <div style={style}> {image ? null : <img src="/assets/img/icon_camera.svg" />} - - <input - type="file" - name="img" - accept="image/*" - onChange={this.upload.bind(this)} - required - /> + <UploadImage onUpload={this.upload.bind(this)} /> </div> - } + {result.loading && ( + <div className='loading' style={style}> + <Loader /> + </div> + )} </div> <div className='cta'> <h2>Search by Image</h2> |