#2 Added FileInfo component, improving FileUpload component

Author: jonisaa

src/components/common/FileInfo.js

@@ -0,0 +1,30 @@
+import React, { Component, PropTypes } from 'react';
+
+const FileUploadItem = ({ file, height, width }) => {
+	let image = null;
+
+	if (file.type.match(/\.(jpg|jpeg|png|gif)$/)) {
+		image = <img height={height} width={width} src={file.preview}/>;
+	}
+
+	return (
+		<div>
+			{image}
+			<p>{file.name}</p>
+			<p>{file.size}</p>
+		</div>
+	);
+};
+
+FileUploadItem.propTypes = {
+	file: PropTypes.object.isRequired,
+	height: PropTypes.string,
+	width: PropTypes.string
+};
+
+FileUploadItem.defaultProps = {
+	height: "50px",
+	width: "50px"
+};
+
+export default FileUploadItem;

src/components/field/FileUpload.js

@@ -1,5 +1,9 @@
 import React, { Component, PropTypes } from 'react';
 import DropZone from '../common/DropZone';
+import GlyphButton from '../common/GlyphButton';
+import FileInfo from '../common/FileInfo';
+
+import fetch from 'isomorphic-fetch';
 
 export default class FileUpload extends Component {
 	static propTypes = {
@@ -11,11 +15,34 @@ export default class FileUpload extends Component {
 	};
 
 	onDrop = (files) => {
+		//TODO Check file and size. Avoid duplicated files
 		let fileArray = [...this.state.files, ...files];
+
 		this.setState({ files: fileArray });
 	};
 
+	onClick = (event) => {
+		// TODO Handle response status for upload service
+		event.preventDefault();
+
+		const { files } = this.state;
+		const { url } = this.props;
+
+		let fileData = new FormData();
+
+		files.forEach((file) => {
+			fileData.append(file.name, file);
+		});
+
+		fetch(url, {
+			method: "POST",
+			body: fileData
+		});
+	};
+
 	render() {
+		let { files } = this.state;
+
 		return (
 			<div>
 				<label>Files</label>
@@ -25,6 +52,15 @@ export default class FileUpload extends Component {
 							Try dropping some files here, or click to select files to upload.
 						</div>
 					</DropZone>
+					<div>{
+						files.map((file, index) => (
+							<FileInfo key={index} file={file}/>
+						))
+					}
+					</div>
+					<div>
+						<GlyphButton text="Upload" onClick={this.onClick}/>
+					</div>
 				</div>
 			</div>
 		);