Handling Multipart/Form-Data in Next.js | Updated 2024

53

When building web applications, handling file uploads is a common requirement. Next.js, a popular React framework, can handle file uploads using multipart/form-data. This article will guide you through setting up file uploads in a Next.js application.

Prerequisites

Before we start, ensure you have the following:

• Node.js installed
• Basic knowledge of Next.js and React
• A Next.js project setup. If not, you can create one using:

npx create-next-app@latest
cd your-nextjs-app

Steps for Handling Multipart/Form-Data in Next.js

Step 1: Install Dependencies

We’ll need a few packages to handle file uploads and parse multipart/form-data:

• formidable for parsing form data
• fs for interacting with the file system

Install these packages using npm or yarn:

npm install formidable

or

yarn add formidable

Step 2: Create an API Route for File Upload

Next.js allows you to create API routes in the pages/api directory. Let’s create a route to handle file uploads.

Create a new file at pages/api/upload.js:

import formidable from 'formidable';
import fs from 'fs';
import path from 'path';

// Set the config for formidable
export const config = {
  api: {
    bodyParser: false,
  },
};

const uploadDir = path.join(process.cwd(), '/public/uploads');

const ensureDir = dir => {
  if (!fs.existsSync(dir)) {
    fs.mkdirSync(dir, { recursive: true });
  }
};

const uploadFile = async (req, res) => {
  ensureDir(uploadDir);
 
  const form = new formidable.IncomingForm();
  form.uploadDir = uploadDir;
  form.keepExtensions = true;
 
  form.parse(req, (err, fields, files) => {
    if (err) {
      return res.status(500).json({ error: err.message });
    }
   
    const filePath = files.file.filepath;
    const fileName = files.file.originalFilename;

    fs.rename(filePath, path.join(uploadDir, fileName), (err) => {
      if (err) {
        return res.status(500).json({ error: err.message });
      }
     
      res.status(200).json({ message: 'File uploaded successfully' });
    });
  });
};

export default uploadFile;

Step 3: Create a File Upload Form

Create a simple form to allow users to upload files. Add the following code to a new file at pages/index.js:

import { useState } from 'react';

export default function Home() {
  const [file, setFile] = useState(null);

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const formData = new FormData();
    formData.append('file', file);

    const res = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
    });

    if (res.ok) {
      alert('File uploaded successfully');
    } else {
      alert('Failed to upload file');
    }
  };

  return (
    <div>
      <h1>Upload a File</h1>
      <form onSubmit={handleSubmit}>
        <input type="file" onChange={handleFileChange} />
        <button type="submit">Upload</button>
      </form>
    </div>
  );
}

Step 4: Update Next.js Configuration

Make sure your Next.js configuration allows for file uploads and serving static files from the public/uploads directory.

Update your next.config.js file:

const path = require('path');

module.exports = {
  // Other configurations...
  webpack: (config, { isServer }) => {
    if (isServer) {
      require('./scripts/generate-sitemap');
    }
   
    config.module.rules.push({
      test: /\.(png|jpe?g|gif|mp3|wav|ogg|ttf|woff|woff2|eot|otf|svg)$/,
      loader: 'file-loader',
      options: {
        publicPath: '/_next/static/media',
        outputPath: 'static/media',
        name: '[name].[hash].[ext]',
      },
    });

    return config;
  },
};

Step 5: Test Your Implementation

Start your Next.js development server:

npm run dev

or

yarn dev

Open your browser and navigate to http://localhost:3000. You should see the file upload form. Try uploading a file and ensure it’s correctly saved in the public/uploads directory.

Conclusion

In this article, we covered how to handle multipart/form-data in Next.js by creating an API route to handle file uploads using formidable and fs. We also built a simple file upload form in a Next.js page to test our implementation. With these steps, you can now handle file uploads in your Next.js applications.

For more updates on programming trends and tutorials, visit blogsea.net regularly.

Handling Multipart/Form-Data in Next.js – FAQs