#2 Added delete functionality

Author: Jonatan Salas

src/components/common/FileInfo.js

@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import { Col } from 'react-bootstrap';
+import { Col, Glyphicon } from 'react-bootstrap';
 import filesize from 'filesize';
 
 export default class FileUploadItem extends Component {
@@ -16,7 +16,7 @@ export default class FileUploadItem extends Component {
 	};
 
 	render() {
-		let { file, height, width } = this.props;
+		let { file, height, width, onClick } = this.props;
 
 		const containerStyle = {
 			margin: "auto",
@@ -38,6 +38,12 @@ export default class FileUploadItem extends Component {
 			paddingRight: "10px"
 		};
 
+		const glyphSizeStyle = {
+			textAlign: 'left',
+			paddingLeft: "10px",
+			paddingBottom: "10px"
+		};
+
 		const imgStyle = {
 			marginTop: "10px",
 			display: 'block',
@@ -57,9 +63,12 @@ export default class FileUploadItem extends Component {
 			<Col xs={4} md={4}>
 				<div style={containerStyle}>
 					<img height={height} width={width} src={image} style={imgStyle}/>
-					<div style={textContainerStyle}>
+					<div style={textContainerStyle} onClick={onClick}>
 						<p style={fileNameStyle}>{filename}</p>
-						<p style={fileSizeStyle}>{filesize(file.size)}</p>
+						<p style={fileSizeStyle}>
+							<Glyphicon glyph="trash"/>
+							{" " + filesize(file.size)}
+						</p>
 					</div>
 				</div>
 			</Col>

src/components/field/FileUpload.js

@@ -16,6 +16,7 @@ export default class FileUpload extends Component {
 	};
 
 	onDrop = (files) => {
+		//TODO filter to avoid duplicates
 		let fileArray = [...files, ...this.state.files];
 
 		this.setState({ files: fileArray });
@@ -38,6 +39,13 @@ export default class FileUpload extends Component {
 		});
 	};
 
+	deleteItem = (position) => {
+		let { files } = this.state;
+		files.splice(position, 1);
+
+		this.setState({ files: files });
+	};
+
 	render() {
 		let { files } = this.state;
 
@@ -81,7 +89,7 @@ export default class FileUpload extends Component {
 							<div style={rowStyle}>
 								<Row>{
 									files.map((file, index) => (
-										<FileInfo key={index} file={file}/>
+										<FileInfo key={index} file={file} onClick={() => this.deleteItem(index)}/>
 									))
 								}
 								</Row>