Skip to content

Commit 564fe65

Browse files
manurangamanuranga
authored
Merge pull request ECLK#73 from manuranga/master
Add upload ui to nomination ui
2 parents 0db3aba + 228728b commit 564fe65

File tree

3 files changed

+85
-180
lines changed

3 files changed

+85
-180
lines changed

‎src/components/NominationStep3/NominationStep3.jsx‎

Lines changed: 21 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -2,187 +2,51 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import {withStyles} from '@material-ui/core/styles';
44
import Button from '@material-ui/core/Button';
5-
import Grid from '@material-ui/core/Grid';
6-
import axios from 'axios';
7-
import FormGroup from '@material-ui/core/FormGroup';
8-
import FormControl from '@material-ui/core/FormControl';
9-
import {DropzoneArea} from 'material-ui-dropzone'
10-
import FormLabel from '@material-ui/core/FormLabel';
11-
import Paper from '../ReviewPaper';
12-
5+
import FileUpload from "../common/FileUpload";
6+
import Divider from '@material-ui/core/Divider';
137

148
const styles = theme => ({
159
container: {
1610
display: 'flex',
1711
flexWrap: 'wrap',
1812
},
19-
textField: {
20-
marginLeft: theme.spacing.unit,
21-
marginRight: theme.spacing.unit,
22-
width: 200,
23-
},
24-
dense: {
25-
marginTop: 19,
26-
},
27-
menu: {
28-
width: 200,
29-
},
30-
button: {
31-
margin: theme.spacing.unit,
32-
},
33-
input: {
34-
display: 'none',
35-
},
36-
label: {
37-
marginLeft: theme.spacing.unit,
38-
},
39-
fileUpload: {
40-
marginLeft: theme.spacing.unit*115,
41-
width: 200,
42-
marginTop: -5,
43-
44-
},
45-
customlable: {
46-
width: 1500,
47-
marginTop: 15,
48-
4913

50-
},
51-
formControl: {
52-
margin: theme.spacing.unit * 10,
53-
},
54-
FormGroup: {
55-
margin: theme.spacing.unit,
56-
// width: theme.spacing.unit * 150,
57-
// height: theme.spacing.unit,
58-
59-
},
60-
6114
});
6215

6316

6417
class TextFields extends React.Component {
6518

66-
constructor(props){
19+
constructor(props) {
6720
super(props);
68-
this.state={
69-
// filesToBeSent:[],
70-
files: []
71-
}
72-
}
73-
74-
// onDrop(acceptedFiles, rejectedFiles) {
75-
// console.log('Accepted files: ', acceptedFiles);
76-
// var filesToBeSent=this.state.filesToBeSent;
77-
// filesToBeSent.push({acceptedFiles});
78-
// this.setState(acceptedFiles);
79-
// console.log('filesToBeSent : ', this.state);
21+
this.state = {}
22+
}
8023

81-
// }
82-
handleChange(files){
24+
handleChange(files) {
8325
this.setState({
8426
files: files
8527
});
86-
console.log("==========",this.state)
87-
}
88-
89-
// handleClick(event){
90-
// // console.log("handleClick",event);
91-
// var self = this;
92-
// if(this.state.filesToBeSent.length>0){
93-
// var filesArray = this.state.filesToBeSent;
94-
// var req = request.post('upload'+'fileupload');
95-
96-
// axios({
97-
// method: 'post',
98-
// headers: {
99-
// 'Accept': 'application/json',
100-
// 'Content-Type': 'application/json',
101-
// },
102-
// url: 'nominations/candidates',
103-
// data: this.state
104-
// })
105-
// req.attach(filesArray[0].name,filesArray[0])
106-
107-
// req.end(function(err,res){
108-
// if(err){
109-
// console.log("error ocurred");
110-
// }
111-
// console.log("res",res);
112-
// alert("File printing completed")
113-
// });
114-
// }
115-
// else{
116-
// alert("Please upload some files first");
117-
// }
118-
// }
119-
28+
}
12029

12130

122-
handleUpload = (event) => {
123-
const data = new FormData()
124-
const config = { headers: { 'Content-Type': 'multipart/form-data' } };
31+
handleUpload = (event) => {
32+
const data = new FormData();
33+
const config = {headers: {'Content-Type': 'multipart/form-data'}};
12534
var filesArray = this.state.files;
126-
127-
console.log("======sddd========",filesArray[0].name);
128-
// console.log(data);
129-
130-
data.append('file', filesArray[0],filesArray[0].name);
131-
// console.log("==============", data.get('File'));
132-
axios
133-
.post('upload', data, config, {
134-
// onUploadProgress: ProgressEvent => {
135-
// this.setState({
136-
// loaded: (ProgressEvent.loaded / ProgressEvent.total*100),
137-
// })
138-
// },
139-
})
140-
.then(res => {
141-
console.log(res.statusText)
142-
})
143-
}
35+
};
14436

14537
render() {
14638
const {classes} = this.props;
14739
var names = ['Jake', 'Jon', 'Thruster'];
148-
return (
149-
<form className={classes.container} noValidate autoComplete="off">
150-
<Grid container direction="row" justify="flex-start" alignItems="stretch" spacing={8}>
151-
<Grid container spacing={8}>
152-
<Paper></Paper>
153-
</Grid>
154-
</Grid>
155-
156-
<Grid container direction="row" justify="flex-start" alignItems="stretch" spacing={8}>
157-
<FormControl component="fieldset" className={classes.formControl}>
158-
159-
{ names.map((name) => (
160-
<div>
161-
<form onSubmit={this.handleUpload}>
162-
<Grid container spacing={8}>
163-
<FormGroup className={classes.FormGroup} row>
164-
<FormLabel component="legend">Upload {name} Down Below :</FormLabel>
165-
<DropzoneArea onChange={this.handleChange.bind(this)} ></DropzoneArea>
166-
{/* <input type="hidden" onChange={ this.fileSelectHandler } name="supportDocConfDataId" value={name}
167-
ref={(input) => { this.actionInput = input }} /> */}
168-
</FormGroup>
169-
</Grid>
170-
<Grid container spacing={8}>
171-
<Grid className={classes.label} item lg={3}>
172-
<Button onClick={this.handleUpload} variant="contained" value="Submit" color="secondary" className={classes.submit}>
173-
Upload
174-
</Button>
175-
</Grid>
176-
</Grid>
177-
</form>
178-
</div>
179-
))}
180-
{/* <input type="hidden" onChange={ this.fileSelectHandler } name="nominationId" value="1"
181-
ref={(input) => { this.actionInput = input }} /> */}
182-
</FormControl>
183-
</Grid>
184-
</form>
185-
);
40+
return (
41+
<div>
42+
43+
<span>Download form : </span> <a download={"nomination.pdf"}>nomination.pdf</a> <br/>
44+
<span>Signed form : </span><FileUpload/> <br/>
45+
<Divider variant="middle"/>
46+
<br/>
47+
<span>Supporting doc 1 : </span><FileUpload/> <br/>
48+
<span>Supporting doc 1 : </span><FileUpload/> <br/>
49+
</div>);
18650
}
18751
}
18852

‎src/components/common/FileUpload/DefaultUI.js‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
import React from "react";
2+
import LinearProgress from '@material-ui/core/LinearProgress';
3+
import DoneOutline from '@material-ui/icons/DoneOutline';
24
import PropTypes from "prop-types";
35

46
const defaultStyles = {
57
border: "2px dashed #ccc",
68
textAlign: "center",
7-
padding: "50px"
9+
padding: "50px",
10+
height: "150px",
11+
"min-width": "400px",
812
};
913

1014
const statusTargetedStyles = {
@@ -22,12 +26,26 @@ const statusTargetedStyles = {
2226
}
2327
};
2428

25-
const DefaultUI = ({ status }) => (
26-
<div style={{ ...defaultStyles, ...statusTargetedStyles[status] }}>
27-
<p>Drag and drop an image file here or click.</p>
28-
</div>
29+
const showFlagToStyle = (flag) => (
30+
{display: flag ? "" : "none"}
2931
);
3032

33+
const DefaultUI = ({status, progress}) => {
34+
const uploading = status === "uploading";
35+
36+
return <div style={{...defaultStyles, ...statusTargetedStyles[status]}}>
37+
<p style={showFlagToStyle(status === "ready")}>
38+
Drag and drop an image file here or click.
39+
</p>
40+
<div style={showFlagToStyle(status === "uploaded")}>
41+
<DoneOutline color="secondary"/>
42+
<a download={"filename"} href={"ok"}>filename</a>
43+
</div>
44+
<p style={showFlagToStyle(uploading)}> Uploading... </p>
45+
{uploading && <LinearProgress variant="determinate" value={progress}/> }
46+
</div>
47+
};
48+
3149
DefaultUI.propTypes = {
3250
status: PropTypes.string.isRequired
3351
};

‎src/components/common/FileUpload/index.js‎

Lines changed: 41 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React, { Component } from "react";
1+
import React, {Component} from "react";
22
import PropTypes from "prop-types";
33
import DefaultUI from "./DefaultUI";
4+
import axios from "axios";
45

56
class FileUpload extends Component {
67
constructor(props) {
@@ -9,6 +10,7 @@ class FileUpload extends Component {
910

1011
this.state = {
1112
status: "ready",
13+
progress: 0,
1214
allowedTypes,
1315
allowedSize,
1416
multiple
@@ -109,34 +111,56 @@ class FileUpload extends Component {
109111
if (error) {
110112
data.error = errorMessages;
111113
data.files = null;
114+
this.reset();
115+
} else {
116+
const formData = new FormData();
117+
this.setState({status: "uploading", progress: 0});
118+
formData.append("file", data.files[0]);
119+
axios.post('http://localhost:9001/ec-election/file-upload', formData, {
120+
headers: {
121+
'Content-Type': 'multipart/form-data'
122+
},
123+
124+
onUploadProgress: (progressEvent) => {
125+
let percentCompleted = (progressEvent.loaded * 100) / progressEvent.total;
126+
this.setState(
127+
{progress: percentCompleted}
128+
);
129+
console.log(percentCompleted);
130+
}
131+
132+
133+
}).then((response) => {
134+
this.setState(
135+
{
136+
status: "uploaded",
137+
name: response.name
138+
}
139+
);
140+
});
112141
}
113142

114-
const { onUploadFiles } = this.props;
115-
onUploadFiles(data);
143+
// const { onUploadFiles } = this.props;
144+
// onUploadFiles(data);
145+
116146

117-
this.reset();
118147
};
119148

120149
render() {
121150
const { renderUI } = this.props;
122-
const { status } = this.state;
151+
const {status, progress} = this.state;
123152
const props = {
124-
status
153+
status,
154+
progress,
125155
};
126156

127157
return (
128158
<div onClick={this.clickFileInput}>
129-
<div
130-
onDragEnter={this.onDragEnter}
131-
onDragOver={this.onDragOver}
132-
onDrop={this.onDrop}
133-
style={{ position: "relative" }}
134-
>
135-
{renderUI && typeof renderUI === "function" ? (
136-
renderUI(props)
137-
) : (
138-
<DefaultUI {...props} />
139-
)}
159+
<div onDragEnter={this.onDragEnter}
160+
onDragOver={this.onDragOver}
161+
onDrop={this.onDrop}
162+
style={{position: "relative"}}>
163+
{renderUI && typeof renderUI === "function" ? (renderUI(props)) : (<DefaultUI {...props} />)}
140164

141165
<input
142166
ref={fpi => (this.fileUploadInput = fpi)}
@@ -161,7 +185,6 @@ FileUpload.propTypes = {
161185
allowedTypes: PropTypes.array,
162186
allowedSize: PropTypes.number,
163187
multiple: PropTypes.bool,
164-
onUploadFiles: PropTypes.func.isRequired,
165188
renderUI: PropTypes.func
166189
};
167190

0 commit comments

Comments
 (0)