Upload file to external api.

[ppot]

So here it is. been bashing my head all day on this one.
I have a web app with next using the local api.

const handleSubmit = async (
        event: React.FormEvent<HTMLFormElement>
      ): Promise<void> => {
        event.preventDefault()

        const formData  = new FormData();
        formData.append('file', configuration.file);
        
        try {
            const res = await fetch(`${artefactUrl}/upload`, {
                method: 'POST',
                body: formData
            })

            if (res.status === 200) {
            } else {
                const { message } = await res.json()
                let error = new Error(message ? message : res.statusText)
                throw error
            }
        } catch (error) {
            const { response } = error
            console.error(error)
            setErrorMsg(response ? response.statusText : error.message)
        }
      }

Then i'm calling my external api :

export default async (req: NextApiRequest, res: NextApiResponse) => {
    const session = await getSession(req as NextApiRequest);
    const url = 'http://' + process.env.CORE_API + ':' + process.env.API_PORT + '/api/v1/teams';
    const {
        query: { id, project, artefact }
    } = req;
    if (id !== '') {
        try {

          const response = await axios.post(`${url}/${id}/${project}/${artefact}/upload`, req.body, {
                headers: {
                    'Authorization': 'Bearer ' + session.token,
                }
            }).then((res) => {
                return res;
            });

            // if (response.status == 202) {
            //     return res.status(200).send({ done: true })
            // }
        } catch (error) {
            const { response } = error
            return response
                ? res.status(response.status).json({ message: response.data })
                : res.status(400).json({ message: error.message })

        }
    }
}


### External api.
File upload is handled with multer on express. it work using a basic call with postman. I can't seem to redirect the upload from next-api to my external server.

[nevinpuri]

I have the same error. Did you manage to find a fix?

[ppot]

Yes I did. Sorry started working for a company and didn't connect here. I'm using a pretty complexe scalable custom architecture. So in reality each context is isolated in his docker. So you need to dl locally before you can access it. The easiest solution would be to use an S3 or s3 like docker and use s3 api to handle this use case. But at the time of writing the stack was SFTP. Which can't be used like S3 and my token where on a distant API

[cryonayes]

My project has same logic, client uploads a file which is sent to NextJS API under pages/api/upload then it gets the data from res.body like yours. But there is a problem, first i sent a file directly on client and then using /api/upload. I compared the files in hexedecimal form and it differs. I think NextApiRequest brokes the encoding. For example hex 0x89 turned into 0xEFBFBD. I really need to solve this issue...

[cryonayes]

Took me 21 hours but I solved the problem. Here is my solution.

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'
    })
}

[bluenex]

Thank you very much, this definitely saves a lot of my time.

[yelnyafacee]

what is http://localhost:21942? the server API backend domain?

[micheltucker]

    httpProxyMiddleware(req, res, {
        target: 'http://localhost:21942'
    })

Did you ever figure it out?

[cryonayes]

Port 21942 was my api backend, nothing special. I used this solution on my project GoShare. You can see the port there.

[lewashby]

you can also just pass the initial request ... no need of installing other packages ... just need to correct the headers

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);
}

[surendhar-palanisamy]

@LewAshby This literally saved my day

[daniloamendola]

This is the final solution!

[simofirdoussi]

I spent about 10 hours on this, I tried to reconstruct the object I was trying to send to my external API when all I had to do was re-steer the request.
Thanks!

[frkntplglu]

It didn't work for me. What am I missing? @LewAshby

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

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    const {
      headers: { cookie, ...rest },
      method,
    } = req;
    const { access_token } = parse(req.headers.cookie || '');
    const cookies = [];
    cookies.push(
      serialize('access_token', access_token, {
        httpOnly: true,
        secure: true,
        path: '/',
      })
    );

    try {
      return externalApi
        .post(`/categories?businessId=3`, req, {
          headers: {
            cookie: cookies,
            'content-type': rest['content-type'],
            'content-length': rest['content-length'],
          },
        })
        .then((response) => {
          console.log('response in api : ', response.data);
          return res.status(200).json(response.data.data);
        })
        .catch((error) => {
          console.log('error in api : ', error.response);
          return res.status(500).json({ ...error.response.data });
        });
    } catch (error) {
      return res.status(400).json(error);
    }
  }
}

[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/

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 data = Buffer.from(rawBody).toString('utf8');

    const formData = new FormData();
    formData.append('file', 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`);
  }
}

[anshrusia200]

I am getting an error that readable is not async iterable. Can you help me fix it @skulden13?