upload, parse and store door lock entries

client/src/scenes/UploadDLockData/components/FileUpload.js

@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import {Form} from "semantic-ui-react";
+
+import { uploadDoorLockData } from "../../../store/actions";
+
+class FileUpload extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            file: null,
+        };
+
+        this.onFileChange = this.onFileChange.bind(this);
+        this.onUploadClick = this.onUploadClick.bind(this);
+    }
+
+    onFileChange(event) {
+        const file = event.target.files[0];
+        this.setState({file});
+    };
+
+    onUploadClick() {
+        const { uploadDoorLockData } = this.props;
+        const { file } = this.state;
+
+        if (file) {
+            uploadDoorLockData(file);
+        }
+    };
+
+    render() {
+        return (
+            <div>
+                <Form.Input
+                    fluid
+                    required
+                    label="Select DLock file"
+                    type="file"
+                    accept=".csv"
+                    onChange={this.onFileChange}
+                />
+                <Form.Button onClick={this.onUploadClick}>Upload</Form.Button>
+            </div>
+        );
+    }
+}
+
+const mapDispatchToProps = (dispatch) => ({
+    uploadDoorLockData: (doorLockDataFile) => uploadDoorLockData(dispatch, doorLockDataFile)
+});
+
+export default connect(null, mapDispatchToProps)(FileUpload);