var UploadForm React createClass getInitialState function return data

 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
var UploadForm = React.createClass({
getInitialState: function() {
return {data: null, textData: null}
},
handleSubmit: function(e) {
e.preventDefault();
var selectedFile = React.findDOMNode(this.refs.selectedFile).value.trim();
if (!selectedFile) {
return;
}
console.log("Process form with: %s", selectedFile);
this.onFileSubmit({
url: '/api/upload',
data: this.state.textData
});
React.findDOMNode(this.refs.selectedFile).value = '';
return;
},
onFileSubmit: function(req) {
$.ajax({
url: req.url,
dataType: 'json',
contentType: 'application/json',
type: 'POST',
data: JSON.stringify(req),
success: function(res) {
this.setState({data: res});
}.bind(this),
error: function(xhr, status, err) {
console.error(req.url, status, err.toString());
}.bind(this)
});
},
handleFile: function(e) {
var reader = new FileReader();
var file = e.target.files[0];
reader.onload = function(upload) {
this.setState({
textData: upload.target.result
});
console.log(this.state.textData);
}.bind(this);
reader.readAsText(file);
},
render: function() {
return (
<form className="col-lg-12 uploadForm"
encType="multipart/form-data"
method="POST" onSubmit={this.handleSubmit}>
<div className="input-group">
<input type="file"
onChange={this.handleFile}
className="form-control input-lg"
help="load file" ref="selectedFile" />
<span className="input-group-btn">
<button className="btn btn-lg btn-primary" type="submit" value="Post">
OK
</button>
</span>
</div>
</form>
);
}
});