#2 Added FileInfo component, improving FileUpload component

Author: jonisaa

package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "attr-accept": "^1.0.3",
     "bootstrap": "^3.3.6",
+    "filesize": "^3.3.0",
     "font-awesome": "^4.6.3",
     "isomorphic-fetch": "^2.2.1",
     "react": "^15.1.0",

src/components/common/FileInfo.js

@@ -1,17 +1,18 @@
 import React, { Component, PropTypes } from 'react';
+import filesize from 'filesize';
 
 const FileUploadItem = ({ file, height, width }) => {
 	let image = null;
 
-	if (file.type.match(/\.(jpg|jpeg|png|gif)$/)) {
+	if (file.type.match(/image/)) {
 		image = <img height={height} width={width} src={file.preview}/>;
 	}
 
 	return (
 		<div>
 			{image}
 			<p>{file.name}</p>
-			<p>{file.size}</p>
+			<p>{filesize(file.size)}</p>
 		</div>
 	);
 };

src/components/field/FileUpload.js

@@ -16,7 +16,7 @@ export default class FileUpload extends Component {
 
 	onDrop = (files) => {
 		//TODO Check file and size. Avoid duplicated files
-		let fileArray = [...this.state.files, ...files];
+		let fileArray = [...files, ...this.state.files];
 
 		this.setState({ files: fileArray });
 	};
@@ -51,13 +51,13 @@ export default class FileUpload extends Component {
 						<div>
 							Try dropping some files here, or click to select files to upload.
 						</div>
+						<div>{
+							files.map((file, index) => (
+								<FileInfo key={index} file={file}/>
+							))
+						}
+						</div>
 					</DropZone>
-					<div>{
-						files.map((file, index) => (
-							<FileInfo key={index} file={file}/>
-						))
-					}
-					</div>
 					<div>
 						<GlyphButton text="Upload" onClick={this.onClick}/>
 					</div>