feat(gatsby): Support uploading files as part of forms (#31470)

* feat(gatsby): Support uploading files as part of forms * Remove unused code
gatsbyjs · May 19, 2021 · 0d3886c · 0d3886c
1 parent 6c94c54
commit 0d3886c
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 18 deletions.
diff --git a/integration-tests/functions/__tests__/__snapshots__/functions-dev.js.snap b/integration-tests/functions/__tests__/__snapshots__/functions-dev.js.snap
@@ -1,5 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`develop functions can parse different ways of sending data file in multipart/form 1`] = `
+Array [
+  Object {
+    "buffer": Object {
+      "data": Array [
+        104,
+        105,
+        32,
+        102,
+        114,
+        105,
+        101,
+        110,
+        100,
+        115,
+        10,
+      ],
+      "type": "Buffer",
+    },
+    "encoding": "7bit",
+    "fieldname": "file",
+    "mimetype": "text/plain",
+    "originalname": "test.txt",
+    "size": 11,
+  },
+]
+`;
+
 exports[`develop functions can parse different ways of sending data form data 1`] = `
 Object {
   "a": "form-data",

diff --git a/integration-tests/functions/__tests__/__snapshots__/functions-prod.js.snap b/integration-tests/functions/__tests__/__snapshots__/functions-prod.js.snap
@@ -1,5 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`production functions can parse different ways of sending data file in multipart/form 1`] = `
+Array [
+  Object {
+    "buffer": Object {
+      "data": Array [
+        104,
+        105,
+        32,
+        102,
+        114,
+        105,
+        101,
+        110,
+        100,
+        115,
+        10,
+      ],
+      "type": "Buffer",
+    },
+    "encoding": "7bit",
+    "fieldname": "file",
+    "mimetype": "text/plain",
+    "originalname": "test.txt",
+    "size": 11,
+  },
+]
+`;
+
 exports[`production functions can parse different ways of sending data form data 1`] = `
 Object {
   "a": "form-data",

diff --git a/integration-tests/functions/src/api/parser.js b/integration-tests/functions/src/api/parser.js
@@ -5,7 +5,9 @@ export default function topLevel(req, res) {
     res.json(req.query)
   } else if (!_.isEmpty(req.body)) {
     res.json(req.body)
+  } else if (!_.isEmpty(req.files)) {
+    res.json(req.files)
   } else {
-    res.send(`no body was sent`)
+    res.json(`no body was sent`)
   }
 }
diff --git a/integration-tests/functions/test-helpers.js b/integration-tests/functions/test-helpers.js
@@ -1,4 +1,5 @@
 const fetch = require(`node-fetch`)
+const { createReadStream } = require("fs")
 const execa = require(`execa`)
 const fs = require(`fs-extra`)
 const path = require(`path`)
@@ -178,24 +179,22 @@ export function runTests(env, host) {
         expect(result).toMatchSnapshot()
       })
 
-      // TODO enable when functions support uploading files.
-      // test(`file in multipart/form`, async () => {
-      // const { readFileSync } = require("fs")
-
-      // const file = readFileSync(path.join(__dirname, "./fixtures/test.txt"))
-
-      // const form = new FormData()
-      // form.append("file", file)
-      // const result = await fetch(`${host}/api/parser`, {
-      // method: `POST`,
-      // body: form,
-      // }).then(res => res.json())
+      test(`file in multipart/form`, async () => {
+        const file = createReadStream(
+          path.join(__dirname, "./__tests__/fixtures/test.txt")
+        )
 
-      // console.log({ result })
+        const form = new FormData()
+        form.append("file", file)
+        const result = await fetch(`${host}/api/parser`, {
+          method: `POST`,
+          body: form,
+        }).then(res => res.json())
 
-      // expect(result).toMatchSnapshot()
-      // })
+        expect(result).toMatchSnapshot()
+      })
 
+      // TODO enable when functions support streaming files.
       // test(`stream a file`, async () => {
       // const { createReadStream } = require("fs")
 

diff --git a/packages/gatsby/src/commands/serve.ts b/packages/gatsby/src/commands/serve.ts
@@ -132,7 +132,7 @@ module.exports = async (program: IServeProgram): Promise<void> => {
   if (functions) {
     app.use(
       `/api/*`,
-      multer().none(),
+      multer().any(),
       express.urlencoded({ extended: true }),
       (req, res, next) => {
         const cookies = req.headers.cookie

diff --git a/packages/gatsby/src/internal-plugins/functions/gatsby-node.ts b/packages/gatsby/src/internal-plugins/functions/gatsby-node.ts
@@ -386,7 +386,7 @@ export async function onCreateDevServer({
 
   app.use(
     `/api/*`,
-    multer().none(),
+    multer().any(),
     express.urlencoded({ extended: true }),
     (req, res, next) => {
       const cookies = req.headers.cookie