How could I use A Multipart-Form In Next.js using API Routes with Django in back end

[ayoubarcode]

I'm using Django Rest As A back end server , what i'm trying to do is posting data that contains a file (ex : {first_name:"", last_name: "", profile_picture:}) through nextjs api to my django server . what i found is that the FormData is not defined in api routes files , and even if i add content-type:"multipart/form-data" is not working

i tried to use third party package such as formidable but without any result

check out the screen below

i will be appreciated for your help to

[icyJoseph]

Next.js API routes run in Node.js, which doesn't support FormData, so you need a way to create those.

Setting the content type won't cut it because multipart-form streams are a special kind of format. See in the browser that the outgoing request has content type multipart/form-data followed by a seemingly rubbish string, called boundary.

This sort of thing is best to be handled by a package, for example https://www.npmjs.com/package/form-data, because of all edge cases that need to be handled.

I also think you don't need to specify the content type, axios, should be able to figure out the data type, and create the boundary string.

[amartya-dev]

I am facing the same problem, and I am already using the form-data package, it still doesn't work, it works if I use FormData on the client-side and directly call my backend, here my code:

import axios from "axios";
import formidable from "formidable";
import FormData from "form-data";
import type { NextApiRequest, NextApiResponse } from "next";
import { getSession } from "next-auth/react";
//
import BlogAPIs from "utils/apis/BlogAPIs";

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

export default async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const session = await getSession({ req });

    const formData = new FormData();

    const fs = require("fs");

    const data: { fields: any; files: any } = await new Promise(
      (resolve, reject) => {
        const form = new formidable.IncomingForm();

        form.parse(req, (err: any, fields: any, files: any) => {
          if (err) reject({ err });
          resolve({ fields, files });
        });
      }
    );

    ["title", "content", "description", "thumbnail"].map((key) => {
      data.fields[key] && formData.append(key, data.fields[key]);
      data.files[key] &&
        formData.append(key, fs.createReadStream(data.files[key].filepath));
    });

    let config = {
      method: "post",
      url: `${process.env.API_BASE_URL}/blogs/`,
      headers: {
        Authorization: `Bearer ${session?.backendToken as string}`,
        ...formData.getHeaders(),
      },
      data: formData,
    };

    await axios(config);

    res.status(200).json("Succesfully added blog");
  } catch (error: any) {
    res.status(700).json(error.message);
  }
};

[juliankrispel]

Next.js API routes run in Node.js, which doesn't support FormData, so you need a way to create those.

That's a misleading statement

[icyJoseph]

Well, node 18 did change that. I'll update.

[hongnguyenhuu96]

The following steps works for me:

1. disable the bodyParser of nextjs
2. using axios forward request to the target backend and pipe response data

import axios from "axios";
const baseURL = process.env.PHOTO_ADDRESS || "http://photo.default/v1";
const apikey = process.env.PHOTO_API_KEY;

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

async function handler(req, res) {
  let uploadPhotoAddress = baseURL + "/upload";
  if (req.method == "POST") {
    const { data } = await axios.post(uploadPhotoAddress, req, {
      responseType: "stream",
      headers: {
        "Content-Type": req.headers["content-type"], // which is multipart/form-data with boundary included
        apikey,
      },
    });
    data.pipe(res);
  } else {
    return res.status(405).json({ message: "Method Not Allowed" });
  }
}

export default handler;

[guilherme-oliveira-trybe]

Thank's you salve my life.
My code have a little difference, but I based in your code

import { NextApiRequest, NextApiResponse } from 'next'
import { api } from 'services/axios/api' // file with basic axios instance
import { treatAPIError, generateConfig } from 'utils/api'
import { POST_COMPANY } from 'constants/serverSideEndpoints' // file with endpoints

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

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const { headers } = generateConfig(req) // get my token

  try {
    const { data } = await api.post(POST_COMPANY, req, {
      responseType: 'blob',
      headers: {
        ...headers,
        'Content-Type': req.headers['content-type'] as string,
      },
    })
    return res.status(201).json(data)
  } catch (error) {
    return res.status(405).json({ message: "Method Not Allowed" });
  }
}

[PengMouse]

omo bro, you're a life saver

[ocodista]

Is there a way to do that with server actions?

[ocodista]

This is not working:

"use server";

export async function generateAudio(formData: FormData) {
  console.log(process.env.ELEVENLABS_API_TOKEN);
  console.log(formData.get("voice"));
  const form = new FormData();
  form.append("files", formData.get("voice"));
  form.append("description", "Caio Voice");
  // form.append("labels", "caio-from-input");
  form.append("name", "caio-cloudflare-r2");
  console.log(formData.get("voice"));
  console.log(form);

  const response = await fetch("https://api.elevenlabs.io/v1/voices/add", {
    method: "POST",
    headers: {
      "xi-api-key": process.env.ELEVENLABS_API_TOKEN,
    },
    body: JSON.stringify(form),
  });
  console.log("OK?", response.ok);
  console.log(await response.text());
}

[robsoncloud]

To use with a server action I had to create a new FormData object from the library form-data and recreate the file object from the buffer, might be late for you @ocodista but hope helps someone else:

"user server"
import {z} from "zod"

import FormData from "form-data";
import { redirect } from "next/navigation";


const API_URI = "http://localhost:8000/api"

const fileSchema = z.instanceof(File, {message: "Required"})
const imageSchema = fileSchema.refine(file => file.size === 0 || file.type.startsWith("image/"))

const addProduct = z.object({
  name: z.string().min(1),
  description: z.string().min(1),
  priceInCents: z.coerce.number().int().min(1),
  file: fileSchema.refine(file => file.size > 0, "File required"),
  image: imageSchema.refine(file => file.size > 0, "Image requried")
})

export async function create_product(
  previousState: unknown,
  formData: FormData
) {

  const validation = addProduct.safeParse(Object.fromEntries(formData))

  if(validation.success == false) return validation.error.formErrors.fieldErrors;

  const {data} = validation;
  
  // create a new FormData object
  const formObj = new FormData()
  formObj.append("name",data.name)
  formObj.append("description",data.description)
  formObj.append("priceInCents",data.priceInCents)
  if(data.image) {
    const imageBuffer = Buffer.from(await data.image.arrayBuffer())
    formObj.append("image", imageBuffer, {
      filename: data.image.name,
      contentType: data.image.type
    })
  }

  if(data.file){
    const fileBuffer = Buffer.from(await data.file.arrayBuffer())
    formObj.append("file",fileBuffer, {
      filename: data.file.name,
      contentType: data.file.type
    })
  }

  const headers = formObj.getHeaders()

  const resp = await fetch(`${API_URI}/products`, {
    method: "POST",
    headers: {
      ...headers
    },
    body: formObj.getBuffer()
  })

  
  console.log(resp.ok)
  console.log(await resp.json())
  
  redirect("/admin/products")
}

[skulden13]

Hi there,

Here's one more good solution w/o using any external packages.
https://vancelucas.com/blog/how-to-access-raw-body-data-with-next-js/

That works for me:

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

async function getRawBody(readable) {
  const chunks = [];
  for await (const chunk of readable) {
    chunks.push(typeof chunk === 'string' ? Buffer.from(chunk) : chunk);
  }
  return Buffer.concat(chunks);
}

export default async function handler(req, res) {
  const { headers, method } = req;

  switch (method) {
  case 'POST':

    const rawBody = await getRawBody(req);
    const formData = new FormData();
    formData.append('file', new Blob([data]));

    const response = await fetch(
      `https://your-API.com`, {
        method: 'POST',
        headers,
        body: formData,
      },
    );

    response.ok
      ? res.status(201).json({ message: 'Uploaded!' })
      : res.status(response.status).json({ message: response.statusText });
    break;
  default:
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${method} Not Allowed`);
  }
}

[TianLangStudio]

This code works on my laptop without Axios and any external packages.
I use ```
"next": "14.2.15",
"next-auth": "^4.24.10",
"react": "^18",

`
async function handler(req) {
    const apiUrl = `apiUrl`
    const {headers} = req;
    const accessToken = 'token';
    const headerNew = {
        "Authorization": `Bearer ${accessToken}`,
    };
    const formData = await req.formData();
    try {
        const response = await fetch(apiUrl, {
            method:'POST',
            headers: headerNew,
            body: formData
        })
        const json = await response.json();
        return NextResponse.json(json);
    } catch (e) {
        console.error('upload error', e)
        return NextResponse.json({status:500, success: false, message: `${e}`})
    }
}

export  {handler as POST}`