#16 GETリクエスト時の処理を実装

src/pages/_app.tsx

@@ -1,4 +1,4 @@
-import '../../styles/globals.css'
+import '../styles/globals.css'
 import type { AppProps } from 'next/app'
 import React from 'react'
 import { SessionProvider } from 'next-auth/react'

src/pages/api/genbas/[id]/files.ts

@@ -1,5 +1,5 @@
 import { NextApiRequest, NextApiResponse } from 'next'
-import formidable, { Formidable } from 'formidable'
+import formidable from 'formidable'
 import fs from 'fs'
 import path from 'path'
 
@@ -13,14 +13,25 @@ const form = formidable({ multiples: true })
 
 const filesHandler = (req: NextApiRequest, res: NextApiResponse) => {
   const { id } = req.query
+  if (req.method === 'GET') {
+    const dirPath = path.join('uploads', 'genbas', fillZeroFolderId(String(id)))
+    const fileNameList = fs.readdirSync(dirPath)
+    let results: object[] = []
+    fileNameList.map((fileName: string) => {
+      const stat = fs.statSync(path.join(dirPath, fileName))
+      const obj = { fileName: fileName, stat: stat }
+      results.push(obj)
+    })
+    return res.json(results)
+  }
+
   if (req.method === 'POST') {
     const contentType = req.headers['content-type']
 
     form.parse(req, async function (err, fields, files) {
       const acceptedFiles = files.file
       if (Array.isArray(acceptedFiles)) {
         acceptedFiles.map(async (elem: any) => {
-          console.log(JSON.stringify(elem))
           await saveFile(elem, String(id))
         })
       }
@@ -31,11 +42,20 @@ const filesHandler = (req: NextApiRequest, res: NextApiResponse) => {
 
 const saveFile = async (file: any, genbaId: string) => {
   const data = fs.readFileSync(file.filepath)
-  const uploadPath = path.join('uploads', 'genbas', genbaId)
+  const uploadPath = path.join('uploads', 'genbas', fillZeroFolderId(genbaId))
   fs.existsSync(uploadPath) ? null : fs.mkdirSync(uploadPath)
   fs.writeFileSync(uploadPath + `/${file.originalFilename}`, data)
   await fs.unlinkSync(file.filepath)
   return
 }
 
+// 現場IDが3桁以下の場合、フォルダ名の前方を0で埋めて4桁に揃える
+const fillZeroFolderId = (genbaId: string): string => {
+  const genbaIdLength = genbaId.length
+  if (genbaIdLength > 3) {
+    return genbaId
+  }
+  return '0'.repeat(4 - genbaIdLength) + genbaId
+}
+
 export default filesHandler

src/pages/rttweb/[id]/files.tsx

@@ -1,16 +1,21 @@
 import axios from 'axios'
 import { NextPage } from 'next'
 import { useRouter } from 'next/router'
-import path from 'path'
 import { useCallback } from 'react'
 import { useDropzone } from 'react-dropzone'
+import useSWR from 'swr'
+import { Button } from 'react-bootstrap'
 
 const FILES_API_FILE_FORM_KEY = 'file'
 
 const Files: NextPage = () => {
   const router = useRouter()
   const { id } = router.query
 
+  const fetcher = (url: string) => axios.get(url).then((res) => res.data)
+  const { data, error } = useSWR('/api/genbas/' + id + '/files', fetcher)
+  console.log(data)
+
   const onDrop = useCallback(async (acceptedFiles: File[]) => {
     const formData = new FormData()
     acceptedFiles.map((file: File) => {
@@ -26,6 +31,10 @@ const Files: NextPage = () => {
   }, [])
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
 
+  const handleDelete = () => {}
+
+  if (!data) return <>loading</>
+
   return (
     <section className='container'>
       <div {...getRootProps()}>
@@ -36,6 +45,21 @@ const Files: NextPage = () => {
           <p>Drag 'n' drop some files here, or click to select files</p>
         )}
       </div>
+      <h2>{data.length}個のファイル</h2>
+      <Button variant='primary'>ダウンロード</Button>
+      <Button variant='danger'>全削除</Button>
+      {data.map((elem: any, idx: number) => {
+        return (
+          <>
+            <p key={idx}>{elem.fileName}</p>
+            <p>{elem.stat.mtime}</p>
+            <p>{elem.stat.size}B</p>
+            <Button variant='danger' id={String(idx)}>
+              削除
+            </Button>
+          </>
+        )
+      })}
     </section>
   )
 }

src/pages/rttweb/[id]/index.tsx

@@ -1,8 +1,5 @@
-
-
-
 const Drawer = () => {
-    return <div>drawer</div>
+  return <div>drawer</div>
 }
 
-export default Drawer
+export default Drawer