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

What are the steps to ensure compatibility with relative paths when transitioning from v5 to v6?

Is there a term in JavaScript that denotes an object that can be serialized into JSON format?

Tips for eliminating unnecessary or duplicate dependencies in package.json files

Enhance user experience with dynamic color changes in JavaScript

Tips for modifying the value of a JSON object using Javascript or Jquery

What steps can I take to resolve the issue in my code? I keep receiving a type error stating that it cannot read

Modify the text on a button using vanilla JavaScript

Identifying the moment when the body scroll reaches the top or bottom of an element

Utilizing Vue to create a button within a popup window

What could be causing the 404 error I'm receiving for this specific URL?

What is the best way to leverage the SWR hook for implementing all CRUD operations with API methods?

Can JavaScript be used to modify the headers of an HTTP request?

Is there a way to incorporate jQuery into SharePoint 2010?

Using onchange within an onchange event will not function as intended

Angular 4 - The Promising Outcome: How to Retrieve the Value upon Completion

Using regular expressions to identify the presence of "&", parentheses, and consecutive letters in a string

Javascript use of overlaying dynamically generated Canvases

Is it possible to create dynamic meta tags in Angular that will appear in a Twitter-style card preview?

Create a generic function that retrieves a specific property from an array of objects using the select method

Minimize unnecessary rendering in React when toggling between tabs