Skip to content

Commit

Permalink
#16 単一ファイルのアップロード処理を実装
Browse files Browse the repository at this point in the history
  • Loading branch information
tmoka committed Sep 27, 2022
1 parent 92ab6f4 commit df5d443
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 1 deletion.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"argon2": "^0.29.1",
"axios": "^0.27.2",
"bootstrap": "^5.2.1",
"formidable": "3.2.4",
"next": "12.2.5",
"next-auth": "^4.10.3",
"prisma": "^4.3.1",
Expand All @@ -29,6 +30,7 @@
},
"devDependencies": {
"@mermaid-js/mermaid-cli": "^9.1.6",
"@types/formidable": "^2.0.5",
"@types/node": "18.7.14",
"@types/react": "18.0.18",
"@types/react-dom": "18.0.6",
Expand Down
35 changes: 35 additions & 0 deletions src/pages/api/genbas/[id]/files.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { NextApiRequest, NextApiResponse } from "next"
import formidable from 'formidable'
import fs from 'fs'

export const config = {
api: {
bodyParser: false,
},
};


const filesHandler = (req: NextApiRequest, res: NextApiResponse) => {
if (req.method === 'POST') {
console.log("TEST TEXT")
const form = new formidable.IncomingForm();
form.parse(req, async function (err, fields, files) {
console.log(JSON.stringify(files.file))
await saveFile(files.file);
return res.status(200).send("");
});


return res.json({})
}
return res.json({})
}

const saveFile = async (file: any) => {
const data = fs.readFileSync(file.filepath);
fs.writeFileSync(`./public/${file.originalFilename}`, data);
await fs.unlinkSync(file.filepath);
return;
};

export default filesHandler
31 changes: 31 additions & 0 deletions src/pages/rttweb/[id]/files.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import axios from "axios"
import { NextPage } from "next"
import path from "path";
import { useCallback } from "react"
import { useDropzone } from 'react-dropzone'

const FILES_API_FILE_FORM_KEY = 'file';

const Files: NextPage = () => {
const onDrop = useCallback(async (acceptedFiles: File[]) => {
const formData = new FormData();
acceptedFiles.map((file: File) => {
console.log(file)
formData.append(FILES_API_FILE_FORM_KEY, file)
})
try {
console.log(formData.get('file'))
await axios.post('/api/genbas/1/files', formData)
} catch (e) {
console.error(e)
}
}, [])
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })

return (<section className='container'><div {...getRootProps()}>
<input {...getInputProps({ className: 'dropzone' })} />
{isDragActive ? <p>Drop file here!</p> : <p>Drag 'n' drop some files here, or click to select files</p>}
</div></section>)
}

export default Files
8 changes: 8 additions & 0 deletions src/pages/rttweb/[id]/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@



const Drawer = () => {
return <div>drawer</div>
}

export default Drawer
36 changes: 35 additions & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,13 @@
dependencies:
"@types/ms" "*"

"@types/formidable@^2.0.5":
version "2.0.5"
resolved "https://registry.yarnpkg.com/@types/formidable/-/formidable-2.0.5.tgz#e54e31d242ef750ac2d05aa163fa0274c8e6ef9c"
integrity sha512-uvMcdn/KK3maPOaVUAc3HEYbCEhjaGFwww4EsX6IJfWIJ1tzHtDHczuImH3GKdusPnAAmzB07St90uabZeCKPA==
dependencies:
"@types/node" "*"

"@types/json5@^0.0.29":
version "0.0.29"
resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
Expand Down Expand Up @@ -529,6 +536,11 @@ array.prototype.flatmap@^1.3.0:
es-abstract "^1.19.2"
es-shim-unscopables "^1.0.0"

asap@^2.0.0:
version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
integrity sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==

ast-types-flow@^0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
Expand Down Expand Up @@ -794,6 +806,14 @@ devtools-protocol@0.0.1019158:
resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.1019158.tgz#4b08d06108a784a2134313149626ba55f030a86f"
integrity sha512-wvq+KscQ7/6spEV7czhnZc9RM/woz1AY+/Vpd8/h2HFMwJSdTliu7f/yr1A6vDdJfKICZsShqsYpEQbdhg8AFQ==

dezalgo@1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/dezalgo/-/dezalgo-1.0.3.tgz#7f742de066fc748bc8db820569dddce49bf0d456"
integrity sha512-K7i4zNfT2kgQz3GylDw40ot9GAE47sFZ9EXHFSPP6zONLgH6kWXE0KWJchkbQJLBkRazq4APwZ4OwiFFlT95OQ==
dependencies:
asap "^2.0.0"
wrappy "1"

dir-glob@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
Expand Down Expand Up @@ -1214,6 +1234,15 @@ form-data@^4.0.0:
combined-stream "^1.0.8"
mime-types "^2.1.12"

formidable@3.2.4:
version "3.2.4"
resolved "https://registry.yarnpkg.com/formidable/-/formidable-3.2.4.tgz#c0019368718de33ecb637c66d03b6342a677893a"
integrity sha512-8/5nJsq+o2o1+Dryx1k5gLTDaw0dNE9kL4P3srKArO6zhoerGm42/R8zq+L5EkV7kckNTvJpJke0kI8JseL3RQ==
dependencies:
dezalgo "1.0.3"
hexoid "1.0.0"
once "1.4.0"

fs-constants@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
Expand Down Expand Up @@ -1398,6 +1427,11 @@ has@^1.0.3:
dependencies:
function-bind "^1.1.1"

hexoid@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/hexoid/-/hexoid-1.0.0.tgz#ad10c6573fb907de23d9ec63a711267d9dc9bc18"
integrity sha512-QFLV0taWQOZtvIRIAdBChesmogZrtuXvVWsFHZTk2SU+anspqZ2vMnoLg7IE1+Uk16N19APic1BuF8bC8c2m5g==

https-proxy-agent@5.0.1, https-proxy-agent@^5.0.0:
version "5.0.1"
resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
Expand Down Expand Up @@ -1894,7 +1928,7 @@ oidc-token-hash@^5.0.1:
resolved "https://registry.yarnpkg.com/oidc-token-hash/-/oidc-token-hash-5.0.1.tgz#ae6beec3ec20f0fd885e5400d175191d6e2f10c6"
integrity sha512-EvoOtz6FIEBzE+9q253HsLCVRiK/0doEJ2HCvvqMQb3dHZrP3WlJKYtJ55CRTw4jmYomzH4wkPuCj/I3ZvpKxQ==

once@^1.3.0, once@^1.3.1, once@^1.4.0:
once@1.4.0, once@^1.3.0, once@^1.3.1, once@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
Expand Down

0 comments on commit df5d443

Please sign in to comment.