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

The above code works perfectly for me when passing some uploaded images from the NextJS frontend to the NextJS backend. However, for some other images, the backend code doesn't seem to be able to run.

Here is my code:

//FRONTEND
const form = new FormData();
form.append("file", file);

fetch("/api/myApiRouteFile", {
method: "POST",
body: form,
})
.then((res) => res.json())
.then((data) => {
console.log("data", data);
})
.catch((err) => {
console.log("err", err);
});

//Backend code in NextJS API route
import formidable from "formidable";

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

const handler = async (req, res) => {
console.log("CODE RUNNING.... 🚀 "); //with some files, this message is not printed out, so I assume the code was not running. With other images however, everything is fine.

const form = new formidable.IncomingForm();
form.uploadDir = "./";
form.keepExtensions = true;
form.parse(req, (err, fields, files) => {
console.log(err, fields, files); //some images gets printed out, some other no.
});
};
export default handler;

Again, when uploading some images, the backend runs well and prints out the uploaded image file data, but for other images, nothing happens.

Does anyone know what could be the problem? Maybe a max file size?
Thanks for the help.

@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

@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?