Enable style file upload

package.json

@@ -19,6 +19,7 @@
     "node-sass": "^3.9.2",
     "react": "15.3.0",
     "react-dom": "15.3.0",
+    "react-file-reader-input": "^1.1.0",
     "react-geomicons": "^2.0.5",
     "react-icons": "^2.2.1",
     "react-map-gl": "^1.4.2",

src/app.jsx

@@ -1,4 +1,3 @@
-import 'bootstrap/dist/css/bootstrap.min.css';
 import {Workspace} from './workspace.jsx';
 import {Map} from './map.jsx';
 import {Toolbar} from './toolbar.jsx';

src/map.jsx

@@ -2,16 +2,18 @@ import React from 'react';
 import ReactMapboxGl from 'react-mapbox-gl';
 import {ZoomControl} from 'react-mapbox-gl';
 
-
 export class Map extends React.Component {
-    constructor(props) {
-			super(props);
-    }
+	constructor(props) {
+		super(props);
+	}
+
 	render() {
 		return <ReactMapboxGl
-      style="mapbox://styles/morgenkaffee/ciqo4gtwo0037c0m7tpcosu63"
-      accessToken="pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w"
-		 ><ZoomControl /></ReactMapboxGl>
+			style="mapbox://styles/morgenkaffee/ciqo4gtwo0037c0m7tpcosu63"
+			accessToken="pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w"
+		 >
+			<ZoomControl />
+		</ReactMapboxGl>;
 	}
 }
 

src/toolbar.jsx

@@ -4,8 +4,26 @@ import { Menu, NavItem, Tooltip, Container, Block, Fixed } from 'rebass'
 import theme from './theme.jsx';
 import {MdSettings, MdPalette, MdLayers, MdSave, MdFolderOpen} from 'react-icons/lib/md';
 import { Button, Text } from 'rebass';
+import FileReaderInput from 'react-file-reader-input';
 
 export class Toolbar extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			styleFile: null
+		};
+	}
+
+	onUpload(_, files) {
+		const [e, file] = files[0];
+		const reader = new FileReader();
+    reader.readAsText(file, "UTF-8");
+    reader.onload = e => {
+			const style = JSON.parse(e.target.result);
+			console.log(style);
+		}
+    reader.onerror = e => console.log(e.target);
+	}
 	render() {
 		return <Container style={{
 			zIndex: 100,
@@ -17,11 +35,13 @@ export class Toolbar extends React.Component {
 			backgroundColor: theme.colors.black }
 		}>
 			<Block>
-				<Button big={true}>
-					<Tooltip inverted rounded title="Save">
-						<MdSave />
-          </Tooltip>
-				</Button>
+				  <FileReaderInput onChange={this.onUpload}>
+					<Button big={true}>
+						<Tooltip inverted rounded title="Save">
+							<MdSave />
+						</Tooltip>
+					</Button>
+					</FileReaderInput>
 			</Block>
 			<Block>
 				<Button big={true}><MdFolderOpen /></Button>