issue-537

app/menus/CollectionMenu.js

@@ -1,24 +1,31 @@
 // @flow
 import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
+import styled from 'styled-components';
 
+import getDataTransferFiles from 'utils/getDataTransferFiles';
+import importFile from 'utils/importFile';
 import Collection from 'models/Collection';
 import UiStore from 'stores/UiStore';
+import DocumentsStore from 'stores/DocumentsStore';
 import MoreIcon from 'components/Icon/MoreIcon';
 import Flex from 'shared/components/Flex';
 import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 
+type Props = {
+  label?: React$Element<*>,
+  onOpen?: () => void,
+  onClose?: () => void,
+  history: Object,
+  ui: UiStore,
+  documents: DocumentsStore,
+  collection: Collection,
+};
+
 @observer
 class CollectionMenu extends Component {
-  props: {
-    label?: React$Element<*>,
-    onOpen?: () => void,
-    onClose?: () => void,
-    onImport?: () => void,
-    history: Object,
-    ui: UiStore,
-    collection: Collection,
-  };
+  props: Props;
+  file: HTMLInputElement;
 
   onNewDocument = (ev: SyntheticEvent) => {
     ev.preventDefault();
@@ -26,6 +33,26 @@ class CollectionMenu extends Component {
     history.push(`${collection.url}/new`);
   };
 
+  onImportFile = (ev: SyntheticEvent) => {
+    // simulate a click on the file upload input element
+    this.file.click();
+  };
+
+  onFilePicked = (ev: SyntheticEvent) => {
+    const files = getDataTransferFiles(ev);
+
+    importFile(
+      {
+        file: files[0],
+        documents: this.props.documents,
+        collectionId: this.props.collection.id,
+      },
+      document => {
+        this.props.history.push(document.url);
+      }
+    );
+  };
+
   onEdit = (ev: SyntheticEvent) => {
     ev.preventDefault();
     const { collection } = this.props;
@@ -39,32 +66,47 @@ class CollectionMenu extends Component {
   };
 
   render() {
-    const { collection, label, onOpen, onClose, onImport } = this.props;
+    const { collection, label, onOpen, onClose } = this.props;
     const { allowDelete } = collection;
 
     return (
-      <DropdownMenu
-        label={label || <MoreIcon />}
-        onOpen={onOpen}
-        onClose={onClose}
-      >
-        {collection && (
-          <Flex column>
-            <DropdownMenuItem onClick={this.onNewDocument}>
-              New document
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={onImport}>
-              Import document
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={this.onEdit}>Edit…</DropdownMenuItem>
-          </Flex>
-        )}
-        {allowDelete && (
-          <DropdownMenuItem onClick={this.onDelete}>Delete…</DropdownMenuItem>
-        )}
-      </DropdownMenu>
+      <span>
+        <HiddenInput
+          type="file"
+          innerRef={ref => (this.file = ref)}
+          onChange={this.onFilePicked}
+          accept="text/markdown, text/plain"
+        />
+        <DropdownMenu
+          label={label || <MoreIcon />}
+          onOpen={onOpen}
+          onClose={onClose}
+        >
+          {collection && (
+            <Flex column>
+              <DropdownMenuItem onClick={this.onNewDocument}>
+                New document
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={this.onImportFile}>
+                Import document
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={this.onEdit}>Edit…</DropdownMenuItem>
+            </Flex>
+          )}
+          {allowDelete && (
+            <DropdownMenuItem onClick={this.onDelete}>Delete…</DropdownMenuItem>
+          )}
+        </DropdownMenu>
+      </span>
     );
   }
 }
 
-export default inject('ui')(CollectionMenu);
+const HiddenInput = styled.input`
+  position: absolute;
+  top: -100px;
+  left: -100px;
+  visibility: hidden;
+`;
+
+export default inject('ui', 'documents')(CollectionMenu);