Commit 2994bfc6 authored by charlyjazz's avatar charlyjazz
Browse files

Create button for remove file

parent e0c8a470
......@@ -6,21 +6,19 @@ html {
width: 100%;
height: 60px;
background-color: #ddd;
border: 4px dotted #888;
text-align: center;
padding-top: 40px;
}
.Div-files .File:first-child {
padding-top: 1em;
border-top: 2px solid #37989291;
}
.File {
margin-top: 1em;
margin-bottom: 1em;
padding-bottom: 1em;
border-bottom: 2px solid #37989291;
padding: .7em 0;
}
.File-type {
......@@ -39,4 +37,15 @@ html {
border: none;
box-shadow: 0px 1px 15px 1px #0000004f;
cursor: pointer;
}
.File-button-remove {
padding: .4em;
background: #de3a36;
border: none;
box-shadow: 0px 1px 5px 1px rgba(208, 113, 113, 0.99);
cursor: pointer;
float: right;
color: white;
margin: 0 0 1em 0;
}
\ No newline at end of file
......@@ -34,6 +34,17 @@ export default class DropFileInput extends Component {
this.setState({uploading: !this.state.uploading})
};
removeFile = (index) => {
this.setState( (prevState) => {
const files = [...prevState.files];
files.splice(index, 1);
return {
files: files
}
});
};
render() {
let files = this.state.files.map((file, index) => {
......@@ -41,6 +52,7 @@ export default class DropFileInput extends Component {
key={index}
chunk_size={this.state.chunk_size}
uploading={this.state.uploading}
clickRemove={this.removeFile.bind(this, index)}
/>
});
......
......@@ -41,15 +41,19 @@ export default class File extends Component {
render() {
return (
<div className="File">
<span className="File-name">Name: {this.props.file.name}</span>
<span className="File-type">Type: {this.props.file.type || 'unknown'}</span>
<span className="File-type">Size: {this.props.file.size}</span>
<span className="File-name">Name: {this.props.file.name}</span>
<span className="File-type">Type: {this.props.file.type || 'unknown'}</span>
<span className="File-type">Size: {this.props.file.size}</span>
{ !this.state.done &&
(<button className="File-button-remove" onClick={this.props.clickRemove}>Remove File</button>)
}
{ this.props.uploading &&
<Line percent={this.state.progress.percent}
strokeColor={this.state.progress.color}
strokeWidth="1"
strokeLinecap='square'
trailColor="#2fb9e224"/>
<Line percent={this.state.progress.percent}
strokeColor={this.state.progress.color}
strokeWidth="1"
strokeLinecap='square'
trailColor="#2fb9e224"/>
}
{ this.state.done && "Done" }
{ this.state.invalid && "Invalid" }
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment