-
-
Notifications
You must be signed in to change notification settings - Fork 24
/
ImageDrop.react.js
85 lines (71 loc) · 2.53 KB
/
ImageDrop.react.js
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
var React = require('react'),
Actions = require('../actions/Actions'),
Dropzone = require('dropzone'),
classNames = require('classnames'),
dropzone = null;
var ImageDrop = React.createClass({
propTypes: {
action : React.PropTypes.string.isRequired,
dataUrl : React.PropTypes.string.isRequired,
imageDidSelect: React.PropTypes.func.isRequired,
success : React.PropTypes.func.isRequired,
error : React.PropTypes.func,
uploadProgress: React.PropTypes.func.isRequired
},
componentDidMount: function () {
var self = this;
Dropzone.autoDiscover = false;
dropzone = new Dropzone(this.view, {
url : this.props.action,
paramName: 'award',
clickable: true,
maxFiles : 1,
//Overwrite Dropzone events
addedfile: function (file) {
},
error: function (file, error) {
self.props.error(file, error);
},
success: function (file, response) {
self.props.success(file, response);
},
thumbnail: function (file, dataUrl) {
self.props.imageDidSelect(file, dataUrl);
},
uploadprogress: function (file, progress, bytesSent) {
self.props.uploadProgress(file, progress, bytesSent);
}
});
},
componentWillUnmount: function () {
dropzone.destroy();
dropzone = null;
},
//Dropzone should be presented in render always
render: function () {
var previewAvailable = !!this.props.dataUrl;
var previewClass = classNames({
'award-preview': previewAvailable,
'center-block' : previewAvailable
}),
iconClass = classNames({
'fa' : true,
'fa-cloud-upload' : true,
'award-upload-icon': true,
'hidden' : previewAvailable
}),
imageClass = classNames({
'img-responsive': true,
'hidden' : !previewAvailable
});
return (
<div className={previewClass}>
<img className={imageClass} src={this.props.dataUrl}/>
<i className={iconClass} ref={function(view) {
this.view = view;
}.bind(this)}></i>
</div>
);
}
});
module.exports = ImageDrop;