error Error [TypeError]: request.formData is not a function #53827

loganknecht · 2023-08-10T00:57:36Z

loganknecht
Aug 10, 2023

Summary

Problem

I am uploading a file using the FormData object.

I cannot call request.formData() because it says it is not a function.

Package JSON Dependencies

{
    // ...
    "dependencies": {
        "@emotion/react": "^11.11.1",
        "@emotion/styled": "^11.11.0",
        "@mui/material": "^5.13.4",
        "@types/file-saver": "^2.0.5",
        "@types/node": "20.2.5",
        "@types/react": "18.2.9",
        "@types/react-dom": "18.2.4",
        "@types/validator": "^13.7.17",
        "eslint": "8.42.0",
        "eslint-config-next": "13.4.4",
        "file-saver": "^2.0.5",
        "next": "^13.4.13",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "replace-in-file": "^7.0.1",
        "typescript": "5.1.3",
        "validator": "^13.9.0"
    }
    // ...
}

Client Code

const form_data = new FormData();

// Required Data
form_data.append("application_id", current_application_id_string);
form_data.append("application_name", current_application_name_string);
form_data.append("application_url", current_application_url_string);

// Optional Data
if (form_state.application_icon !== null) {
    form_data.append(
        "application_icon",
        form_state.application_icon,
        form_state.application_icon.name
    );
}

const api_url = `${api_hostname}/${api_path}`;

const fetch_promise = fetch(api_url, {
    method: "POST",
    headers: {
        "Content-Type": "multipart/form-data",
    },
    body: form_data,
});

fetch_promise
    .then((response) => {
        // ...
    })
    .catch((error: any) => {
        // ...
    });

Server Code

import { NextApiRequest, NextApiResponse } from "next";

async function submit_package_request(request: NextApiRequest, response: NextApiResponse) {
    console.log(request_data);
    const request_data = await request.formData();
    // ...
}

Additional information

I feel like I'm taking crazy pills.

I see a lot of references to "just use formidable". I'm open to that avenue, but I also see people saying "just use request.formData"

I cannot find documentation about the `request.formData()` approach.
And I can't find anything to indicate what the issue is here.

I have updated to the latest `Next` library. My code looks sane.

What am I doing wrong?

Why can I not get this file on the API side?

Example

No response

Answered by loganknecht

Aug 10, 2023

Ok... So this is a huge headache.

For anyone who finds this. The issue was several things.

Next 13 has a different support system for routes which uses route handlers
- https://nextjs.org/docs/app/building-your-application/routing/route-handlers
You cannot use the request.formData without using route handlers
You need to also make sure your route handler is exported correctly
Even with these pieces in place, you still need to disable the body parser

In order to fix this I had to move my api endpoints from the repo_root_dir/src/pages/api/v1/package/submit.tsx directory to repo_root_dir/src/app/api/v1/package/submit/route.ts

THEN

I had to rename my function to POST

AND THEN I had to set …

View full answer

loganknecht · 2023-08-10T20:01:28Z

loganknecht
Aug 10, 2023
Author

Ok... So this is a huge headache.

For anyone who finds this. The issue was several things.

Next 13 has a different support system for routes which uses route handlers
- https://nextjs.org/docs/app/building-your-application/routing/route-handlers
You cannot use the request.formData without using route handlers
You need to also make sure your route handler is exported correctly
Even with these pieces in place, you still need to disable the body parser

In order to fix this I had to move my api endpoints from the repo_root_dir/src/pages/api/v1/package/submit.tsx directory to repo_root_dir/src/app/api/v1/package/submit/route.ts

THEN

I had to rename my function to POST

AND THEN I had to set the configuration to not use the body parser

import { NextApiRequest, NextApiResponse } from "next";

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

export async function POST(request: NextApiRequest, response: NextApiResponse) {
    console.log(request_data);
    const request_data = await request.formData();
    // ...
}

If I can say anything about this whole experience is that the NextJS team is doing a terrible job with documentation and their migration strategy for these changes. It has been an incredibly frustrating experience to chase this down and even more so to debug and triage this was a nightmare.

Good luck to anyone else who finds themselves in this situation as well.

2 replies

AidanGuarniere Oct 18, 2023

lifesaver. thank you

boris-szl Sep 24, 2024

my god, thank you so much, I have been fighting with this for a week..

tamvo22 · 2023-09-20T17:59:21Z

tamvo22
Sep 20, 2023

I ran into this issue as well. However, I was able to get it working with the help of the formidable-serverless library.

import formidable from 'formidable-serverless';
import { NextApiRequest, NextApiResponse } from "next";

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

async function submit_package_request(request: NextApiRequest, response: NextApiResponse) {
      const form = new formidable.IncomingForm();
      form.parse(request, async (err, fields, files) => {
         console.log(err, fields, files);
      });
}

2 replies

loganknecht Oct 18, 2023
Author

Good information, but misses the intention.

Next 13 supports this by default now if you follow the approach I advise.

tamvo22 Feb 2, 2024

That's correct Next 13 supports formData() by default. I forgot to mention that this issue is related Next12 or lower.

VikashLoomba · 2023-09-29T02:12:12Z

VikashLoomba
Sep 29, 2023

I don't mean to be ignorant of the complexity here, but why is not possible to handle FormData natively within the standard /pages/api directory?

2 replies

zhangxinyong12 Dec 14, 2023

How to solve it. I also had a problem with consent

loganknecht Dec 14, 2023
Author

NextJS13+ is different and allows for its usage. Prior to that this wasn't supported. It's because the library implementation on the api side was enhanced when they did the migration to the new directory structure and features.

Nirajan1-droid · 2023-10-05T12:41:40Z

Nirajan1-droid
Oct 5, 2023

literally, i stucked in this from 2 days. godddd
By the way, thank you so much @loganknecht loganknecht
finally solved the problem

0 replies

TiagoJeronimo · 2024-02-06T10:11:41Z

TiagoJeronimo
Feb 6, 2024

I'm usingrequest.formData(), but unfortunately, I keep getting the following warning: ExperimentalWarning: buffer.File is an experimental feature and might change at any time.
Any idea how I can suppress this warning? Or should I use some other library like formidable-serverless for now?

1 reply

Nazehs Feb 15, 2024

I am also getting the same error with formidable-serverless and I am wondering why upload is now a big deal with nextjs. I am having Having the below code

import formidable from 'formidable-serverless';
import { v2 as cloudinary } from 'cloudinary';

cloudinary.config({
    cloud_name: process.env.CLOUDINARY_NAME,
    api_key: process.env.CLOUDINARY_API_KEY,
    api_secret: process.env.CLOUDINARY_API_SECRET,
    secure: true,
});

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

type Data = {
    message: string;
    url?: string;
};

const handler = async (req: NextApiRequest, res: NextApiResponse<Data>) => {
    if (req.method !== 'POST') {
        res.setHeader('Allow', ['POST']);
        res.status(405).end('Method ' + req.method + ' Not Allowed');
        return;
    }

    const form = new formidable.IncomingForm();

    form.parse(req, async (err: any, fields: any, files: any) => {
        if (err) {
            console.error(err);
            res.status(500).json({ message: 'Error parsing the form data.' });
            return;
        }

        const uploadType: string = fields.uploadType;
        const userId = fields.userId;

        if (!uploadType) {
            res.status(400).json({ message: 'Upload type is required.' });
            return;
        }

        let folderPath = '';

        switch (uploadType) {
            case 'avatar':
                folderPath = 'avatars';
                break;
            case 'postContent':
                folderPath = 'posts';
                break;
            default:
                res.status(400).json({ message: 'Invalid upload type.' });
                return;
        }

        if (!files.file) {
            res.status(400).json({ message: 'File upload error: No file was uploaded.' });
            return;
        }

        const file = files.file;

        try {
            const result = await cloudinary.uploader.upload(file.filepath, {
                folder: folderPath,
                public_id: uploadType === 'avatar' ? `${userId}` : undefined,
                overwrite: uploadType === 'avatar',
            });

            res.status(200).json({ message: 'File uploaded successfully.', url: result.secure_url });
        } catch (err) {
            console.error(err);
            res.status(500).json({ message: 'Error uploading the file.' });
        }
    });
};

export default handler;

einazare · 2024-07-03T11:52:21Z

einazare
Jul 3, 2024

I am having the same issue. I am using NextJS 14.0.4 with Pages Router, and the above solutions do not work for me.
Any idea how I could access the form data that was sent from the client side?
I am trying to read a media file, that I want to process, but I do not know how I can read the file on the server side :(

0 replies

jamesleeht · 2024-07-22T17:46:36Z

jamesleeht
Jul 22, 2024

There's another issue related to this. The default fetch API actually accepts a Request() object:
https://developer.mozilla.org/en-US/docs/Web/API/Request

However, if you set formData in a Request() and pass it to fetch, fetch just drops the form data. Took me a long while to find this related issue.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

error Error [TypeError]: request.formData is not a function #53827

{{title}}

Replies: 7 comments 7 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

error Error [TypeError]: request.formData is not a function #53827

Summary

Problem

Package JSON Dependencies

Client Code

Server Code

Additional information

Example

Replies: 7 comments · 7 replies

loganknecht Aug 10, 2023 Author

loganknecht Oct 18, 2023 Author

loganknecht Dec 14, 2023 Author

Replies: 7 comments 7 replies

loganknecht
Aug 10, 2023
Author

loganknecht Oct 18, 2023
Author

loganknecht Dec 14, 2023
Author