How do I pass through a file upload request from a Next.js API to another API?

After a lot of digging and going through many different methods, I finally found one that works.

• I didn't find an explanation as to why the image data was corrupt and meant I couldn't use the original multipart/form-data file.
• Using formidable to read the file, which saves to disk first, then fs to read that file and finally used that in the FormData.
• I don't know how performant this is and I find it uncomfortable having the images saved to disk first instead of just kept in memory.
• Need to go over this again and make sure it's all secure from attack vectors, e.g. file size

import Cors from 'cors'
import initMiddleware from '../../../../../lib/initMiddleware'
import { NextApiRequest, NextApiResponse } from 'next'
import { getToken } from 'next-auth/jwt'
import fetch from "node-fetch";
import FormData from 'form-data'
import { IncomingForm } from 'formidable'
import { promises as fs } from 'fs';

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

const cors = initMiddleware(
    Cors({
        methods: ['POST']
    })
)

const secret = process.env.NEXTAUTH_SECRET;

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    await cors(req, res)

    const { userId } = req.query;
    const { accessToken } = await getToken({ req, secret });

    const fData = await new Promise<{ fields: any, files: any }>((resolve, reject) => {
        const form = new IncomingForm({
            multiples: false
        })
        form.parse(req, (err, fields, files) => {
            if (err) return reject(err)
            resolve({ fields, files })
        })
    });

    const imageFile = fData.files.imageFile
    const tempImagePath = imageFile?.filepath

    try {
        const image = await fs.readFile(tempImagePath)

        const data = new FormData()
        data.append('imageFile', image, { filename: 'avatar.png' })

        const response = await fetch(`${process.env.API_HOST}/user/${userId}/media/avatar`, {
            method: 'POST',
            headers: {
                "Authorization": `Bearer ${accessToken}`,
                "Content-Type": `multipart/form-data; boundary=${data.getBoundary()}`
            },
            body: data
        })

        if (!response.ok) {
            
        }

        res.status(response.status);
    }
    catch (error) {

    }
    finally {
        if (tempImagePath) {
            await fs.rm(tempImagePath)
        }
    }

    res.end()
}

I had the same issue and finally I found pretty elegant way to resolve it.

Solution source: https://github.com/vercel/next.js/discussions/15727#discussioncomment-1094126

Just in case, I'm copying the code from the source:

File upload component

const uploadFile = (file : File) => {
    let url = "http://localhost:3000/api/upload";

    let formData = new FormData();
    formData.set("testFile", file)

    fetch(url, {
        method: "POST",
        body: formData,
    }).then(r => {
        console.log(r);
    })
}

/api/upload.ts:

import {NextApiRequest, NextApiResponse} from "next";
import httpProxyMiddleware from "next-http-proxy-middleware";

// For preventing header corruption, specifically Content-Length header
export const config = {
    api: {
        bodyParser: false,
    },
}

export default (req: NextApiRequest, res: NextApiResponse) => {
    httpProxyMiddleware(req, res, {
        target: 'http://localhost:21942'
    })
}

I had the same problem. I use nextjs api as proxy to another api server, in my case I just passed the entire request instead of the body, specifying to nextjs to not parser the request. The only thing I had to include were the headers of the original request.

import Repository, { apiUrl } from "~/repositories/Repository";
import { parse } from 'cookie';

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

export default async (req, res) => {
    const { headers: { cookie, ...rest }, method } = req;
    const { auth } = parse(cookie);
    if (method === 'PUT') {
        const headers = { 
            Authorization: `Bearer ${auth}`, 
            'content-type': rest['content-type'], 
            'content-length': rest['content-length']
        }
        return Repository.put(`${apiUrl}/user/me/files`, req, { headers: headers })
            .then(response => {
                const { data } = response;
                return res.status(200).json(data);
            })
            .catch(error => {
                const { response: { status, data } } = error;
                return res.status(status).json(data);
            })
    }
    else
        return res.status(405);
}

I struggled A LOT with this problem, so i want to contribute to @Jason Bert's answer because that almost worked, but i had to make another change

Instead of using pure node-fetch, i used axios, and instead of sending a buffer, i casted into a blob and to a binary file, and that worked.

const request = async (req: NextApiRequest, image: Buffer) => {
    const data = new FormData()
    const blob = new Blob([image], {type: 'application/octet-stream'})
    data.append('image', blob)

    return axios.post(`${process.env.API_URL}/api/upload-attachment`, data, {
        headers: req.headers as any,
    })
}

So this is how the final code looks pages/api/form/[[...slug]].ts

import { NextApiRequest, NextApiResponse } from 'next'
import { IncomingForm, Fields, Files } from 'formidable'
import { promises as fs } from 'fs'
import axios from 'axios'

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

const parseFormData = (req: NextApiRequest): Promise<{fields: Fields, files: Files}> => new Promise((resolve, reject) => {
    const form = new IncomingForm({multiples: false})
    form.parse(req, (err, fields, files) => {
        if (err) return reject(err)
        resolve({ fields, files })
    })
})

const request = async (req: NextApiRequest, image: Buffer) => {
    const data = new FormData()
    const blob = new Blob([image], {type: 'application/octet-stream'})
    data.append('image', blob)

    return axios.post(`${process.env.API_URL}/api/upload-attachment`, data, {
        headers: req.headers as any,
    })
}

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    const fData = await parseFormData(req)

    const imageFile = fData.files.image as any
    const tempImagePath = imageFile.path
    const image = await fs.readFile(tempImagePath)
    try {
        const response = await request(req, image)
        res.status(response.status).json(response.data)
    }
    catch (error: any) {
        console.error(error)
        res.status(500).json({error: error.message})
    }
    finally {
        fs.rm(tempImagePath)
    }

    res.end()
}