Repository navigation
Expand file tree
/
Copy pathindex.js
More file actions
114 lines (109 loc) · 3.26 KB
/
Copy pathindex.js
File metadata and controls
114 lines (109 loc) · 3.26 KB
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
import React, { Component, PropTypes } from 'react'
import CSSModules from 'react-css-modules'
import Icon from 'fe-icon'
import * as icons from './icons'
import styles from './index.styl'
import Dropzone from 'react-dropzone'
import Spinner from 'fe-spinner'
const basicStyle = {
width: '100px',
height: '100px',
border: '2px dashed rgba(0, 0, 0, .2)',
borderRadius: '3px'
}
@CSSModules(styles)
export default class extends Component {
static propTypes = {
url: PropTypes.string,
onSuccess: PropTypes.func,
onError: PropTypes.func,
// file: PropTypes.object,
preview: PropTypes.string,
type: PropTypes.oneOf(['image', 'video'])
}
static defaultProps = {
url: 'http://172.30.11.75:41001/attachment',
disableClick: false,
multiple: false,
accept: 'image/*',
type: 'image'
}
componentWillReceiveProps (nextprops) {
if (nextprops.preview !== this.props.preview) {
this.setState({preview: nextprops.preview, status: nextprops.preview ? 2 : this.state.status})
}
}
handleDrop = files => {
if (!files || !files[0]) return
this.setState(Object.assign({}, this.state, {
files: files,
preview: undefined
}), () => this.upload(files[0]))
}
upload = (file) => {
this.setState(Object.assign({}, this.state, {
status: 1
}))
let formData = new window.FormData()
formData.append('file', file)
fetch(this.props.url, {
method: 'POST',
credentials: 'include',
mode: 'cors',
body: formData
})
.then(res => res.json())
.then(res => {
this.setState(Object.assign({}, this.state, {
status: 2
}))
this.props.onSuccess && this.props.onSuccess(res)
})
.catch(err => this.props.onError && this.props.onError(err))
}
handleClear = e => {
e.stopPropagation()
this.props.onClear()
this.setState({files: [], status: 0})
}
state = {
files: this.props.file ? [this.props.file] : [],
// 1 => uploading
// 2 => uploaded
status: this.props.preview ? 2 : 0,
preview: this.props.preview
}
render () {
const state = this.state
const props = this.props
let picUrl = this.state.preview || (state.files[0] ? state.files[0].preview : undefined)
return <div styleName='wrap'>
<Dropzone styleName='dropzone' disableClick={props.disableClick} multiple={props.multiple} accept={props.accept} style={basicStyle} onDrop={this.handleDrop}>
{
picUrl
? <div styleName='preview'>
{
state.status
? <div styleName='mask'>
{
state.status === 1 ? <Spinner /> : <Icon style={{color: '#41BC6A'}} size={30} icon={icons.check} />
}
</div>
: null
}
<span styleName='clear' onClick={this.handleClear}>×</span>
{
this.props.type !== 'video'
? <img src={picUrl} />
: <video><source src={state.files[0].preview} /></video>
}
{
this.props.type === 'video' ? <span styleName='videoTitle'>{state.files[0].name}</span> : null
}
</div>
: <Icon size={40} icon={icons.add} />
}
</Dropzone>
</div>
}
}