diff --git a/package.json b/package.json index 0641365..bf505d2 100644 --- a/package.json +++ b/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", diff --git a/server.js b/server.js new file mode 100644 index 0000000..016926b --- /dev/null +++ b/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'); + +}); \ No newline at end of file diff --git a/src/containers/_nav.js b/src/containers/_nav.js index 3d5d992..97fd51c 100644 --- a/src/containers/_nav.js +++ b/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'] diff --git a/src/routes.js b/src/routes.js index 7e892cd..0376fea 100644 --- a/src/routes.js +++ b/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; diff --git a/src/views/Uploader/index.js b/src/views/Uploader/index.js new file mode 100644 index 0000000..ce99f83 --- /dev/null +++ b/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 ( +
+ + + アップロード + + + + + アップロードするファイルを選択 + + + + + + + アップロード + + + +
+ ) +} + +export default Uploader