[#341] 파일 업로드 문제 해결 (#342)

packages/app/package.json

@@ -19,6 +19,7 @@
     "axios": "^1.3.5",
     "cookies": "^0.9.1",
     "file-saver": "^2.0.5",
+    "formidable": "^3.5.1",
     "jsonwebtoken": "^9.0.2",
     "lottie-web": "^5.12.2",
     "next": "13.5.6",
@@ -33,6 +34,7 @@
     "@next/bundle-analyzer": "^13.5.2",
     "@types/cookies": "^0.9.0",
     "@types/file-saver": "^2.0.5",
+    "@types/formidable": "^3.4.5",
     "@types/jsonwebtoken": "^9.0.2",
     "@types/node": "^18.15.11",
     "@types/qs": "^6.9.7",

packages/app/src/pages/api/server/file/image.ts

@@ -0,0 +1,38 @@
+import fs from 'fs'
+import formidable from 'formidable'
+import serverApi from '@api/serverApi'
+import { withHandler } from '@features/server/libs'
+
+export const config = {
+  api: {
+    bodyParser: false,
+  },
+}
+
+export default withHandler({
+  methods: ['POST'],
+  checkAccess: true,
+  handler: async ({ req, res, accessToken }) => {
+    const form = formidable({})
+    const [_, files] = await form.parse(req)
+
+    const file = files.file?.[0]
+    if (!file || !file.originalFilename) return
+
+    const fileStream = fs.readFileSync(file.filepath)
+    const formData = new FormData()
+    formData.append('file', new Blob([fileStream]), file.originalFilename)
+
+    const { data, status } = await serverApi({
+      method: 'POST',
+      url: '/file/image',
+      data: formData,
+      headers: {
+        ...req.headers,
+        Authorization: `Bearer ${accessToken}`,
+      },
+    })
+
+    return res.status(status).json(data)
+  },
+})

packages/app/src/pages/api/server/file/index.ts

@@ -0,0 +1,38 @@
+import fs from 'fs'
+import formidable from 'formidable'
+import serverApi from '@api/serverApi'
+import { withHandler } from '@features/server/libs'
+
+export const config = {
+  api: {
+    bodyParser: false,
+  },
+}
+
+export default withHandler({
+  methods: ['POST'],
+  checkAccess: true,
+  handler: async ({ req, res, accessToken }) => {
+    const form = formidable({})
+    const [_, files] = await form.parse(req)
+
+    const file = files.file?.[0]
+    if (!file || !file.originalFilename) return
+
+    const fileStream = fs.readFileSync(file.filepath)
+    const formData = new FormData()
+    formData.append('file', new Blob([fileStream]), file.originalFilename)
+
+    const { data, status } = await serverApi({
+      method: 'POST',
+      url: '/file',
+      data: formData,
+      headers: {
+        ...req.headers,
+        Authorization: `Bearer ${accessToken}`,
+      },
+    })
+
+    return res.status(status).json(data)
+  },
+})