Next.js File Upload Solutions: Methods Using FormData & Fetch API, and Multer & Express

Question:

Next.js File Uploads: Server-Side Solutions，I get a lot of questions about forms on NextJS, and a lot of them have to do with posting files to the server. If you've worked in other frameworks you are probably expecting that uploading files is a huge pain, but in NextJS it's actually quite simple. In this article, I'll show you how to upload files to the server using NextJS two different methods.

Answer:

Sure, I can guide you through two different methods of uploading files to the server using Next.js.

Method 1: Using FormData and fetch API

1. Create a form in your Next.js component:

import React, { useState } from 'react';

const UploadForm = () => {
  const [file, setFile] = useState(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('file', file);

    fetch('/api/upload', {
      method: 'POST',
      body: formData,
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch((error) => {
      console.error('Error:', error);
    });
  };

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

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

export default UploadForm;

2. Create an API route in Next.js to handle the file upload:

// pages/api/upload.js
import formidable from 'formidable';
import fs from 'fs';

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

const handler = async (req, res) => {
  if (req.method === 'POST') {
    const form = new formidable.IncomingForm();
    form.uploadDir = './public';
    form.keepExtensions = true;

    form.parse(req, (err, fields, files) => {
      if (err) {
        res.status(500).json({ error: err });
      } else {
        res.status(200).json({ files });
      }
    });
  } else {
    res.status(405).json({ error: 'Method not allowed' });
  }
};

export default handler;

Method 2: Using Multer and Express

1. Install the necessary packages:

npm install express multer

2. Create a server.js file in the root of your project:

const express = require('express');
const multer = require('multer');
const path = require('path');

const upload = multer({ dest: 'uploads/' });
const app = express();

app.post('/upload', upload.single('file'), (req, res) => {
  res.json({ success: true });
});

app.listen(3000, () => console.log('Server started on port 3000'));

3. Modify your form to point to the new server:

const handleSubmit = (e) => {
  e.preventDefault();
  const formData = new FormData();
  formData.append('file', file);

  fetch('http://localhost:3000/upload', {
    method: 'POST',
    body: formData,
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch((error) => {
    console.error('Error:', error);
  });
};

Remember to run your server with node server.js.

These are two different methods to upload files in Next.js. The first one uses the built-in fetch API and a custom API route, while the second one uses Express and Multer. Choose the one that best fits your needs