How to handle FormData using formidable in Next 13 App Router (beta)

[kocur4d]

Summary

I have been trying to use fetch to submit formData to the Route Handler.

    const f = new FormData();
    f.append("name", data.name);
    const response = await fetch("/project/api", {
      method: "POST",
      body: f,
    });

/app/project/api/route.ts

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

export async function POST(request: NextRequest) {
  const uuid = v4();

  var form = formidable({});

  form.parse(request, function (err, fields, files) {
    console.log("fields", fields);
  });

  return NextResponse.json({ id: uuid });
}

Packages are:

    "formidable": "^2.1.1",
    "@types/formidable": "^2.0.5",
    "next": "^13.2.4",

Additional information

Few issues I am having right now are:

1. Typescript is complaining about the type of the request passed to form.parse

Argument of type 'NextRequest' is not assignable to parameter of type 'IncomingMessage'.
  Type 'NextRequest' is missing the following properties from type 'IncomingMessage': aborted, httpVersion, httpVersionMajor, httpVersionMinor, and 48 more.

2. Error when I try to run current code

Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/formidable/src/Formidable.js
./node_modules/formidable/src/index.js
./app/project/api/route.ts
error - Error: Cannot find module '...\.next\server\app\project\api\plugins\octetstream.js'

Eventually I would like to pass some files that is why I am trying to stick to formData.

Any suggestion on how to make next/formidable/typescript happy?

### Example

_No response_

[kocur4d]

OK. Scrap that. Next 13 can simply

 const data = await request.formData();

[srbrunomelo]

I am using the Dropbox library to upload files.

I cannot get my file from the internal api of next.

export async function POST(request: Request) {
try {
let formData = await request.formData();
let body = Object.fromEntries(formData);

Dropbox .filesUpload({
path: "/" + body.file.name,
contents: body.file.path,
})

this does not work

[dilwalashakib]

body.file.path <---------- undefined nextjs version 13.4.2

[chiaka1996]

how did you solve this?

[VityaSchel]

only with app router unfortunately

[AdityaMayukhSom]

How can I save the file or read file data after this?

    let formData = await request.formData();
    let body = Object.fromEntries(formData);

I am sending only one pdf as the file and want to extract the inner text from the pdf.

[Mem0Real]

Read this: https://codersteps.com/articles/building-a-file-uploader-from-scratch-with-next-js-app-directory - this works for me and you don't even need formidable.

After scouring the internet, this is by far the best option in my opinion

[ashdephoenix123]

Thank You soo much this works! Finally I am less frustated. all thanks to you!

[spiltbeans]

Read this: https://codersteps.com/articles/building-a-file-uploader-from-scratch-with-next-js-app-directory - this works for me and you don't even need formidable.

there are so many incomplete articles for the uploading and saving blobs locally with the app router. this article needs to be bumped up more by google SEO 👍 👍

[allestaire]

This Solve the issue Im in! Thanks

[limcolin]

Closing about 15 browser tabs right now because your answer has finally solved it so easily, thank you

[allestaire]

I guess request.formData() wont work on file uploads

Also, I can't concert File object to Buffer. tsk tsk
There is lack of information on how to handle this.

[allestaire]

For those who uses S3, this is how to solve it on App Router

// on your client
const formData = new FormData()
formData.append('image', <File object of an Image>)

// your upload api
const formData = await request.formData();
const file = await formData.get('image').arrayBuffer()
// After converting file to buffer
// You can pass it on to your S3 Client
S3.putObject({
      Body: file,
      Bucket: process.env.AWS_BUCKER_FOLDER,
      Key: path,
    }, function(err, data) {
      if (err) {
        reject(err)
      }
      resolve(data)
    })

[brocchirodrigo]

For those who are using Supabase, I managed to do a test now that way.
Simple GETs in this same format also worked in S3.

import { NextResponse, NextRequest } from "next/server";
import { cookies } from "next/headers";

import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";

export async function POST(request: NextRequest) {
  const supabase = createRouteHandlerClient({ cookies });

  const data = await request.formData();
  let body = Object.fromEntries(data);

  const file = data.get("outdoor") as Blob | null;
  const dataBody = data.get("data") as string;

  const parsedBody = JSON.parse(dataBody);

  try {
    await supabase.storage
      .from("bucket_test")
      .upload(parsedBody.filename, file as File);
  } catch (err) {
    console.error({ error: err });
  }

  return NextResponse.json(body);
}

It is important to define Policies on Storage. I found out that if not defined, the database does not save and shows a 403 in the log.

On the front-end, I'm using React-Hook-Forms, I've tested it like this:

 const handleSubmitCreateUser = useMutation(
    async (userData: UserFormSchema) => {
      const formData = new FormData();

      formData.append("file", userData.file as File);
      let data = {
        ...userData,
        filename: userData.file ? userData.file["name"] : "",
      };

      // @ts-expect-error Delete File to object data reference
      delete data.file;

      formData.append("data", JSON.stringify(data));

      const result = await fetch("/api/test/create", {
        method: "POST",
        mode: "same-origin",
        body: formData,
      }).then((res) => res.json());

      console.log(result);
    }
  );

Sorry if the example wasn't very good. I also had trouble understanding it at first (nothing is documented). Hope this helps!

[karyanayandi]

i use code from https://stackoverflow.com/a/76379718/17577829 and it's worked

[gondar00]

Just a note, this doesn't work with pages/ directory for next version 13.4.3

Works fine with app/ directory

[AliN11]

How to get form data in the pages directory?

[gondar00]

@AliN11 I created a route in /app directory /app/api/upload/route.ts with the code below:

import mime from "mime";
import { NextRequest, NextResponse } from "next/server";
import { storageClient } from "../../../lib/supabase-storage";

export async function POST(request: NextRequest) {
  const formData = await request.formData();

  const file = formData.get("file") as Blob | null;
  if (!file) {
    return NextResponse.json(
      { error: "File blob is required." },
      { status: 400 }
    );
  }

  const buffer = Buffer.from(await file.arrayBuffer());
  
  try {
    const { data, error } = await storageClient
      .from('dashboard-assets')
      .upload(`${Date.now()}-${file.name}`, buffer, {
        contentType: file.type
      });

    if(error) throw error;
    return NextResponse.json(data);
  } catch (e) {
    console.error("Error while trying to upload a file\n", e);
    return NextResponse.json(
      { error: "Something went wrong." },
      { status: 500 }
    );
  }
}

[VityaSchel]

next.js moving to app router abandoning pages router sucks so much
I can't believe people moved from pages router that was simplier and allowed to use any files methodology you want to app router that defines its own ugly shape of pages and web components in your codebase and forces you to use it
in addition to that it's just not intuitive and not widely supported

[CRIMSON-CORP]

i totally agree, its just so sad

[mauriciabad]

If anyone is looking for a working example (with app directory, fully typed and without dependencies) check this out: https://stackoverflow.com/a/77353442/8662476

[lowzzy]

This solution is maybe not on the correct way, because it's not using formidable.
but it's working.

You can see below

//client

const formData = new FormData();
formData.append("file", file);
formData.append("fileName", file.name);
await fetch("/api/...", {
        method: "POST",
        body: formData,
      });

// api
const formData = await request.formData();
const file = formData.get("file") as Blob | null;
const _fileName = formData.get("fileName") as string || 'unknown';
if (file) {
    const buffer = Buffer.from(await file?.arrayBuffer());
    const fileName = `${Date.now()}-${_fileName}`;
    ...
    }