uploading

package.json

@@ -34,8 +34,11 @@
     "axios": "^0.21.1",
     "classnames": "^2.2.6",
     "core-js": "^3.9.1",
+    "cors": "^2.8.5",
     "enzyme": "^3.11.0",
     "js-file-download": "^0.4.12",
+    "multer": "^1.4.2",
+    "nodemon": "^2.0.12",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-app-polyfill": "^2.0.0",

server.js

@@ -0,0 +1,37 @@
+var express = require('express');
+var app = express();
+var multer = require('multer')
+var cors = require('cors');
+
+app.use(cors())
+
+var storage = multer.diskStorage({
+    destination: function(req, file, cb) {
+        cb(null, '/var/www/html/FBS')
+    },
+    filename: function(req, file, cb) {
+        cb(null, Date.now() + '-' + file.originalname)
+    }
+})
+
+var upload = multer({ storage: storage }).single('file')
+
+app.post('/upload', function(req, res) {
+
+    upload(req, res, function(err) {
+        if (err instanceof multer.MulterError) {
+            return res.status(500).json(err)
+        } else if (err) {
+            return res.status(500).json(err)
+        }
+        return res.status(200).send(req.file)
+
+    })
+
+});
+
+app.listen(8000, function() {
+
+    console.log('App running on port 8000');
+
+});

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