Tips for utilizing formidable with NextJS 13 API for image uploading and resolving request errors

Question

Tips for utilizing formidable with NextJS 13 API for image uploading and resolving request errors

I've been working on integrating image uploading functionality into my application. I'm currently using NextJS version 13.4.4 along with formidable@v3. However, whenever I attempt to upload an image, I encounter the following error:

error TypeError: req.on is not a function at IncomingForm.parse (webpack-internal:///(sc_server)/./node_modules/formidable/src/Formidable.js:182:13)

Note: This code functions correctly in previous versions prior to next13.

Below is a snippet of the simple form I am using:

"use client";
import React, { useState } from "react";
import Image from "next/image";
import axios from "axios";

type Props = {};

export default function page({}: Props) {
// Code block for handling file upload and displaying selected image.
}

Additionally, here is the API backend code:

import formidable from "formidable";
import { NextApiRequest } from "next";
import path from "path";
import fs from "node:fs/promises";

// Backend API code snippet implementing file upload logic.

I referenced this code from this source. Could use some guidance on adjusting it for the newer NextJS version.

javascript next.js formidable next-api

Answer 1

Answer №1

It's quite simple: the Nextjs App router uses a different request API, making it incompatible with Formidable. To resolve this issue, you can use await req.formData();.

The example below was provided by the Nextjs team and should work properly.

import mime from "mime";
import { join } from "path";
import { stat, mkdir, writeFile } from "fs/promises";
import * as dateFn from "date-fns";
import { NextRequest, NextResponse } from "next/server";

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());
  const relativeUploadDir = `/uploads/${dateFn.format(Date.now(), "dd-MM-Y")}`;
  const uploadDir = join(process.cwd(), "public", relativeUploadDir);

  try {
    await stat(uploadDir);
  } catch (e: any) {
    if (e.code === "ENOENT") {
      await mkdir(uploadDir, { recursive: true });
    } else {
      console.error(
        "Error while trying to create directory when uploading a file\n",
        e
      );
      return NextResponse.json(
        { error: "Something went wrong." },
        { status: 500 }
      );
    }
  }

  try {
    const uniqueSuffix = `${Date.now()}-${Math.round(Math.random() * 1e9)}`;
    const filename = `${file.name.replace(
      /\.[^/.]+$/,
      ""
    )}-${uniqueSuffix}.${mime.getExtension(file.type)}`;
    await writeFile(`${uploadDir}/${filename}`, buffer);
    return NextResponse.json({ fileUrl: `${relativeUploadDir}/${filename}` });
  } catch (e) {
    console.error("Error while trying to upload a file\n", e);
    return NextResponse.json(
      { error: "Something went wrong." },
      { status: 500 }
    );
  }
}

Check out the link for more information:

Answer 2

It's quite simple: the Nextjs App router uses a different request API, making it incompatible with Formidable. To resolve this issue, you can use await req.formData();.

The example below was provided by the Nextjs team and should work properly.

import mime from "mime";
import { join } from "path";
import { stat, mkdir, writeFile } from "fs/promises";
import * as dateFn from "date-fns";
import { NextRequest, NextResponse } from "next/server";

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());
  const relativeUploadDir = `/uploads/${dateFn.format(Date.now(), "dd-MM-Y")}`;
  const uploadDir = join(process.cwd(), "public", relativeUploadDir);

  try {
    await stat(uploadDir);
  } catch (e: any) {
    if (e.code === "ENOENT") {
      await mkdir(uploadDir, { recursive: true });
    } else {
      console.error(
        "Error while trying to create directory when uploading a file\n",
        e
      );
      return NextResponse.json(
        { error: "Something went wrong." },
        { status: 500 }
      );
    }
  }

  try {
    const uniqueSuffix = `${Date.now()}-${Math.round(Math.random() * 1e9)}`;
    const filename = `${file.name.replace(
      /\.[^/.]+$/,
      ""
    )}-${uniqueSuffix}.${mime.getExtension(file.type)}`;
    await writeFile(`${uploadDir}/${filename}`, buffer);
    return NextResponse.json({ fileUrl: `${relativeUploadDir}/${filename}` });
  } catch (e) {
    console.error("Error while trying to upload a file\n", e);
    return NextResponse.json(
      { error: "Something went wrong." },
      { status: 500 }
    );
  }
}

Check out the link for more information:

Tips for utilizing formidable with NextJS 13 API for image uploading and resolving request errors

Answer №1

Similar questions

Using images stored locally in Three.js leads to undefined mapping and attributes

Perform a fetch request within a map function or loop

Developing several sliders and ensuring they operate independently of each other

In MongoDB, learn the process of efficiently updating nested objects in a dynamic manner

Using Ember's transitionTo method and setting a controller attribute within a callback

Utilize the Google Maps API to align an SVG symbol with the direction of an aircraft's

How to add suspense and implement lazy loading for a modal using Material-UI

The connection to the firebase callback

Can the .scroll function be turned off when a user clicks on an anchor link that causes the page to scroll?

Separating the rules for development and production modes in the webpack configuration file

Ways to trigger the onclick event from different controls

retrieve the source code from all .js links found within the document

What is the best method for enabling communication between two users when the identification numbers created by socketIO are automatically generated?

Attempting to retrieve dynamically generated input fields and cross-reference them with structured length .json data

Issues with tabbed navigation functionality in jQuery

Update the Ngrx reducer when the component is present on the page

Jenkins integration with a MEAN stack application: A step-by-step guide

Emails sent using SendGrid are successful when tested on a local environment, however, they

nodemon was not properly installed on the system

Node.js with Koa: Discontinuation of generator usage on the next step