1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as actions from '../actions'
import UploadImage from './uploadImage.component'
class Query extends Component {
state = {
image: null,
blob: null,
url: "",
threshold: 20,
searchType: 'file',
thresholdChanged: false,
}
handleUpload(blob) {
const { image, threshold } = this.state
if (image) {
URL.revokeObjectURL(image)
}
const url = URL.createObjectURL(blob)
this.setState({ image: url, blob, thresholdChanged: false })
this.props.actions.upload(blob, threshold)
}
handleURL() {
const { url, threshold } = this.state
if (!url || url.indexOf('http') !== 0) return
this.setState({ image: url, blob: null, thresholdChanged: false })
this.props.actions.submit(url, threshold)
}
resubmit() {
const { image, blob } = this.state
if (blob) {
this.handleUpload(blob)
} else {
this.handleURL()
}
}
render() {
const { url, image, threshold, thresholdChanged, searchType } = this.state
const style = {}
if (image) {
style.backgroundImage = 'url(' + image + ')'
}
return (
<div className='query'>
<div>
<span>Search by</span>
<label>
<input
type='radio'
name='searchType'
value='file'
checked={searchType === 'file'}
onChange={e => this.setState({ searchType: e.target.value })}
/> File
</label>
<label>
<input
type='radio'
name='searchType'
value='url'
checked={searchType === 'url'}
onChange={e => this.setState({ searchType: e.target.value })}
/> URL
</label>
</div>
{searchType === 'file'
? <label>
<span>Upload image</span>
<UploadImage onUpload={this.handleUpload.bind(this)} />
</label>
: <label>
<span>Fetch URL</span>
<input
type='text'
value={url}
onChange={e => this.setState({ url: e.target.value })}
onKeyDown={e => e.keyCode === 13 && this.handleURL()}
placeholder='https://'
/>
</label>
}
<label>
<span>Threshold</span>
<input
type='range'
value={threshold}
min={0}
max={64}
step={1}
onChange={e => this.setState({ threshold: parseInt(e.target.value), thresholdChanged: true }) }
/>
<input
type='number'
value={threshold}
min={0}
max={64}
step={1}
onChange={e => this.setState({ threshold: parseInt(e.target.value), thresholdChanged: true }) }
/>
{thresholdChanged && <button onClick={this.resubmit.bind(this)}>Update</button>}
</label>
{image &&
<div className='activeQuery'>
<b>Query image</b>
<div className='image' style={style} />
</div>
}
</div>
)
}
}
const mapStateToProps = state => ({})
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators({ ...actions }, dispatch),
})
export default connect(mapStateToProps, mapDispatchToProps)(Query)
|
