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

Thank you! It worked flawlessly!

You're welcome

Do you know why the images might look scrambled and corrupted, like they are tuned to a dead channel?

@ptcampbell you can try to use formidable-serverless instead of formidable .
This works fine for me.

Thank you very much, it works great!

Thank you so much, worked really well! formidable-serverless was the right approach for me.

guys have you tried to deploy it to vercel and its still working ??

Thank you so much :)

Thank you so Muchh!!!!!!!!!!!!!

It worked like a charm, thank you.

Thanks a ton! works like magic.

I spent a stupid amount of time trying to figure this out until i stumbled upon this answer. Let me have your babies!!

How do you reference the file and send it to AWS. I have all the implementation to send to AWS but I don't see how to reference the file itself that is received.

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?