Next.js: Formidable and form packages

[seejamescode]

Bug report

Describe the bug

I was on Next.js v8 with a monorepo, but am now upgrading to v9 with all endpoints moved to the new pages/api/ feature. But now any of my post endpoints that include file uploading do not work. I tried to simplify the reproduction as much as possible, not even worrying about the API endpoint resolving.

The problem is that the Formidable parse never seems to finish. I also tried Tim’s urlencoded-body-parser as alternative, but it seems to hang also.

A clear and concise description of what the bug is.

To Reproduce

Micro endpoint in pages/api/endpoint.js:

const { run } = require("micro");
const formidable = require("formidable");

const endpoint = async (req, res) => {
  const data = await new Promise(function(resolve, reject) {
    const form = new formidable.IncomingForm();

    form.parse(req, function(err, fields, files) {
      if (err) return reject(err);
      resolve({ fields, files });
    });
  });
};

module.exports = (req, res) => run(req, res, endpoint);

Client-side post in pages/index.js:

const response = await fetch(url, {
  body,
  credentials: "include",
  headers: {
    Authorization: JSON.stringify({ token })
  },
  method: "POST"
});

Expected behavior

That the parse would finish and data would be assigned.

Screenshots

System information

• OS: macOS
• Browser: Chrome
• Version of Next.js: 9.0.1

Additional context

Add any other context about the problem here.

[sync]

i think you need to add to pages/api/endpoint.js:

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

[seejamescode]

Thanks a bunch @sync! My frustration is deserved due to not reading the docs.

[timneutkens]

If you use micro@canary you can do this:

const micro = require("micro");
const formidable = require("formidable");

async function endpoint (req, res) {
  const data = await new Promise(function(resolve, reject) {
    const form = new formidable.IncomingForm();

    form.parse(req, function(err, fields, files) {
      if (err) return reject(err);
      resolve({ fields, files });
    });
  });
};

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

export default micro(endpoint);

[xiaoyu-tamu]

@sync Thank you! where can i find the documentation for the config object?

[sync]

you should ask @timneutkens :-)

[Timer]

Docs are here: https://github.com/zeit/next.js#api-middlewares

[muhaimincs]

If you use micro@canary you can do this:

const micro = require("micro");
const formidable = require("formidable");

async function endpoint (req, res) {
  const data = await new Promise(function(resolve, reject) {
    const form = new formidable.IncomingForm();

    form.parse(req, function(err, fields, files) {
      if (err) return reject(err);
      resolve({ fields, files });
    });
  });
};

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

export default micro(endpoint);

I can't get this working. I hit error resolver is not a function

[IRediTOTO]

i think you need to add to pages/api/endpoint.js:

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

You saved my days =.=

[erhankaradeniz]

If you use micro@canary you can do this:

const micro = require("micro");
const formidable = require("formidable");

async function endpoint (req, res) {
  const data = await new Promise(function(resolve, reject) {
    const form = new formidable.IncomingForm();

    form.parse(req, function(err, fields, files) {
      if (err) return reject(err);
      resolve({ fields, files });
    });
  });
};

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

export default micro(endpoint);

I can't get this working. I hit error resolver is not a function

You can remove micro if you host your project on Vercel, this should resolve the issue.