Take Photo

src/App.tsx

@@ -1,7 +1,9 @@
-import { Icon, Modal, NavBar } from "antd-mobile";
-import * as React from "react";
-import "./App.css";
-import MapWidget from "./components/MapWidget";
+import { Icon, Modal, NavBar } from 'antd-mobile';
+import * as React from 'react';
+import './App.css';
+
+import MapWidget from './components/MapWidget';
+import PictureUploadButton from "./components/PictureUploadButton";
 
 interface IAppState {
   isAboutLaunched: boolean;
@@ -16,17 +18,22 @@ class App extends React.Component<{}, IAppState> {
     }
 
   }
+
+  public onUploadPicture = (files: File[]) => {
+      // uploaded files array available
+  };
+
   public render() {
     return (
-      <div className="App">
+      <div className='App'>
         <NavBar
-          mode="dark"
+          mode='dark'
           rightContent={[
-            <Icon 
-            key="0"
-             type="question-circle" 
-             style={{ marginRight: "16px" }}
-             onClick={this.showAbout} 
+            <Icon
+            key='0'
+             type='question-circle'
+             style={{ marginRight: '16px' }}
+             onClick={this.showAbout}
              />,
           ]}
         >
@@ -37,7 +44,7 @@ class App extends React.Component<{}, IAppState> {
           transparent={true}
           maskClosable={false}
           onClose={this.closeAbout}
-          title="About"
+          title='About'
           footer={[{ text: 'Ok', onPress: () => { this.closeAbout(); } }]}
         >
           <div style={{ height: 50 }}>
@@ -46,6 +53,11 @@ class App extends React.Component<{}, IAppState> {
         </Modal>
 
           <MapWidget/>
+
+          <PictureUploadButton type='primary' onUpload={this.onUploadPicture}>
+              Upload a picture
+          </PictureUploadButton>
+
       </div>
     );
   }

src/components/PictureUploadButton.scss

@@ -0,0 +1,12 @@
+.am-button {
+  position: relative;
+  .image-input {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    touch-action: none;
+  }
+}

src/components/PictureUploadButton.test.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import PictureUploadButton from './PictureUploadButton';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<PictureUploadButton> a button</PictureUploadButton>, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/components/PictureUploadButton.tsx

@@ -0,0 +1,50 @@
+import { Button } from "antd-mobile";
+import { ButtonProps } from "antd-mobile/lib/button";
+import * as React from "react";
+import "./PictureUploadButton.css";
+
+interface IPictureUploadButtonProps extends ButtonProps{
+    onUpload?: (any);
+}
+
+class PictureUploadButton extends React.Component<IPictureUploadButtonProps, any>{
+    public buttonProps: ButtonProps = {};
+    constructor(props: IPictureUploadButtonProps) {
+        super(props);
+
+        this.buttonProps = {
+            activeClassName: props.activeClassName,
+            activeStyle: props.activeStyle,
+            className: props.className,
+            disabled: props.disabled,
+            icon: props.icon,
+            inline: props.inline,
+            loading: props.loading,
+            onClick: props.onClick,
+            prefixCls: props.prefixCls,
+            role: props.role,
+            size: props.size,
+            style: props.style,
+            type: props.type,
+        }
+    }
+
+    public onChange = (event: any) => {
+        if (!this.props.onUpload) {
+            return;
+        }
+        const files = Array.from(event.target.files);
+        this.props.onUpload(files);
+    };
+
+    public render() {
+        return (<Button {...this.buttonProps as ButtonProps}>
+                <input onChange={this.onChange} disabled={this.props.disabled} className={'image-input'} type='file' accept='image/*'/>
+                {
+                    this.props.children
+                }
+            </Button>);
+    }
+}
+
+export default PictureUploadButton;