With Next.js version 13 or higher, you have the capability to handle form data and image uploads without the need for external libraries like formidable or multer. It's simple to save images to your local directory using the following code snippet.

import { NextResponse } from "next/server";
import path from "path";
import { writeFile } from "fs/promises";

export const POST = async (req, res) => {
  const formData = await req.formData();

  const file = formData.get("file");
  if (!file) {
    return NextResponse.json({ error: "No files received." }, { status: 400 });
  }

  const buffer = Buffer.from(await file.arrayBuffer());
  const filename = Date.now() + file.name.replaceAll(" ", "_");
  console.log(filename);
  try {
    await writeFile(
      path.join(process.cwd(), "public/uploads/" + filename),
      buffer
    );
    return NextResponse.json({ Message: "Success", status: 201 });
  } catch (error) {
    console.log("An error occurred: ", error);
    return NextResponse.json({ Message: "Failed", status: 500 });
  }
};

I highly recommend using the popular and lightweight formidable library:

# installation steps
yarn add formidable@v3 @types/formidable

// file-upload.ts
import fs from "fs";
import path from "path";
import { File } from "formidable";

// Important for NextJS!
export const config = {
  api: {
    bodyParser: false,
  },
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<string>
) {
  try {
    // Parse request using formidable
    const { fields, files } = await parseFormAsync(req);

    // Files are now in arrays (since formidable v3+)
    const myfile = (files["myfile"] as any as File[])[0];

    // Save uploaded file in the public folder
    saveFile(myfile, "./public/uploads");

    // Return success message
    res.status(200).json("success!");
  } catch (e) {
    return res.status(500).json(e);
  }
}

function saveFile(file: File, publicFolder: string): void {
  const fileExt = path.extname(file.originalFilename || "");

  fs.renameSync(file.filepath, `${publicFolder}/${file.newFilename}${fileExt}`);
}

// ./helpers/formidable.ts
import type { NextApiRequest } from "next";
import formidable from "formidable";

export type FormidableParseReturn = {
  fields: formidable.Fields;
  files: formidable.Files;
};

export async function parseFormAsync(
  req: NextApiRequest,
  formidableOptions?: formidable.Options
): Promise<FormidableParseReturn> {
  const form = formidable(formidableOptions);

  return await new Promise<FormidableParseReturn>((resolve, reject) => {
    form.parse(req, async (err, fields, files) => {
      if (err) {
        reject(err);
      }

      resolve({ fields, files });
    });
  });
}

Bonus question

Here's a bonus question - it might not be secure to store uploaded images in a public folder. Consider storing them on the cloud instead.

Using S3 and other cloud services

You can integrate with various cloud services using Formidable.

Check out official examples here: https://github.com/node-formidable/formidable/blob/master/examples/store-files-on-s3.js

However, if you prefer local storage for private uploads, that's also an option.

Managing private uploads locally

1. Saving:
   • Store uploads in a non-public directory;
   • For example,

     /private-uploads/{logged_user_id}/

     ;
2. Accessing:
   • Create an API endpoint to retrieve the file
     • Example: https://.../uploads/{filename}
   • Ensure only authenticated user can access their files;
   • Send the file as response;
3. Security Measures:
   • Be cautious about hackers attempting unauthorized access using techniques like .. in the filename;
   • Sanitize filenames by restricting to alphanumeric characters;
   • Alternatively, use a database table for ownership control rather than directory structure;

/pages/api/createpost

Utilizing npm i formidable, Next.js JavaScript, and mongodb. The models are created using mongoose.

import { IncomingForm, File } from 'formidable';
import * as fs from "fs";
import path from "path";
import { v4 as uuidv4 } from 'uuid';
import Post from '../../../models/Model';

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

export default async function handler(req, res) {
    if (req.method !== 'POST') {
        return;
    }

    // Parsing incoming form data using a Promise
    try {
        const data = await new Promise((resolve, reject) => {
            const form = new IncomingForm();
            form. Parse(req, (err, fields, files) => {
                if (err) return reject(err);
                resolve({ fields, files });
            });
        });

        // Defining the folder path for image storage
        const publicFolderPath = path.Join(process.cwd(), 'public', "images");
      
  let responseData;

        // Checking if an image file was uploaded
        if (data.files.image) {
            const oldPath = data.files.image[0].filepath;
            const newFileName = new Date().getTime() + "-" + uuidv4() + "-" + data.files.image[0].originalFilename;
            const newPath = path.join(publicFolderPath, newFileName);

            try {
                // Copying the uploaded image to the designated path
                await fs.promises.copyFile(oldPath, newPath);
                console.log('File copied to:', newPath);
                console.log('File uploaded and renamed:', newFileName);

                // Creating an object with form data
                const formData = {
                    banner: data.fields.banner[0],
                    body: data.fields.body[0],
                    image: newFileName,
                    author: data.fields.author[0],
                };

                // Creating a new post entry in the mongodb database
                try {
                    const post = await Post.create(formData);
                    responseData = post;
                } catch (err) {
                    console.log(err.message);
                }

            } catch (error) {
                console. Error('Error renaming/moving file:', error);
                res.status(500).json({ error: 'Error processing uploaded file.' });
                return;
            }
        } else {
            responseData = data;
        }

        // Responding with the processed data
        res.status(200).json(responseData);

    } catch (error) {
        console. Error('Error parsing form data:', error);
        res.status(500).json({ error: 'Error processing form data.' });
    }
}