Simple Nextjs File Upload — Backend API

nextjs-file-upload-api.js

// Backend
import formidable from 'formidable';

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

export default async (req, res) => {
  const form = new formidable.IncomingForm();
  form.uploadDir = "./";
  form.keepExtensions = true;
  form.parse(req, (err, fields, files) => {
    console.log(err, fields, files);
  });
};

// For the frontend use:
// https://gist.github.com/AshikNesin/e44b1950f6a24cfcd85330ffc1713513

@VesperDev thanks a lot it works. any chance you have tested if it works on work on a vercel.com production deployment?

@VesperDev Hi have you seen the error '413 Request entity too large' during this process?

@damiano216 This is my code.

Frot-end

  const onUploadFile = async (file) => {
    const formData = new FormData()
    formData.append('file', file[0])
    fetch('/api/uploadfile', { method: 'POST', body: formData }).then((response) => {
      response.json().then(resuJ => {
        const { files } = resuJ
        onChangeEstudio('Imagen_studio', files.file.path)
      })
    })
  }

Backend

import formidable from 'formidable-serverless'

const uploadfile = async (req, res) => {
  if (req.method === 'POST') {
    return uploadfilePOST(req, res)
  } else {
    res.setHeader('Allow', ['POST'])
    res.status(405).end(`Method ${req.method} Not Allowed`)
  }

  async function uploadfilePOST (req, res) {
    const form = new formidable.IncomingForm()
    form.uploadDir = './public/estudios/'
    form.keepExtensions = true
    form.parse(req, (err, fields, files) => {
      if (err) res.status(500).send(err)
      res.status(200).json({ fields, files })
    })
  }
}

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

export default uploadfile

That worked for me

do you have an alternative to upload videos and save them in s3?