uploading

src/containers/_nav.js

@@ -18,6 +18,12 @@ const _nav = [{
         to: '/reports',
         icon: 'cil-drop',
     },
+    {
+        _tag: 'CSidebarNavItem',
+        name: 'アップロード',
+        to: '/uploader',
+        icon: 'cil-drop',
+    },
     // {
     //   _tag: 'CSidebarNavTitle',
     //   _children: ['Components']

src/routes.js

@@ -2,12 +2,14 @@ import React from 'react';
 
 const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'));
 const BoxDisplacemen = React.lazy(() => import('./views/BoxDisplacemen/index'));
+const Uploader = React.lazy(() => import('./views/Uploader/index'));
 
 
 const routes = [
   { path: '/', exact: true, name: 'Home' },
   { path: '/dashboard', name: 'ダッシュボード', component: Dashboard },
   { path: '/reports', exact: true, name: 'レポート', component: BoxDisplacemen },
+  { path: '/uploader', exact: true, name: 'アップロード', component: Uploader },
 ];
 
 export default routes;

src/views/Uploader/index.js

@@ -0,0 +1,61 @@
+import React, {useState} from 'react';
+import axios from 'axios';
+import {
+  CCol,
+  CFormGroup,
+  CInput,
+  CInputFile,
+  CLabel,
+  CButton,
+  CCard,
+  CCardHeader,
+  CCardBody,
+  CCardFooter,
+} from  '@coreui/react'
+import CIcon from '@coreui/icons-react'
+
+
+function Uploader() {
+
+  const [file, setFile] = useState(null);
+
+  function onChangeHandler(e){
+    setFile(e.target.files[0])
+  }
+
+  function onClickHandler(e) {
+    const data = new FormData()
+    data.append('file', file);
+    //console.log(file);
+    axios.post("http://localhost:8000/upload", data, { // receive two parameter endpoint url ,form data
+      })
+      .then(res => { // then print response status
+        console.log(res.statusText)
+    });
+  }
+
+  return (
+    <div>
+      <CCard>
+      <CCardHeader>
+      アップロード
+      </CCardHeader>
+      <CCardBody>
+      <CFormGroup row>
+        <CCol md="3">
+          <CLabel htmlFor="date-input">アップロードするファイルを選択</CLabel>
+        </CCol>
+        <CCol xs="12" md="9">
+          <CInputFile type="file" onChange={onChangeHandler} id="file-input" name="file-input"/>
+        </CCol>
+      </CFormGroup>
+      <CCardFooter>
+      <CButton type="submit" onClick={onClickHandler} size="sm" color="primary"><CIcon name="cil-scrubber" /> アップロード</CButton>
+      </CCardFooter>
+      </CCardBody>
+      </CCard>
+    </div>
+  )
+}
+
+export default Uploader