If you find yourself in a situation similar to mine where you are using app-router but your API is located in pages/api, I discovered that the most effective method is to send the file as a base64 string. You can then decode it into a Buffer, create a new form-data object, and send it along. Here's how the code for handling the file looks:
import { API_ENDPOINTS } from '@/API/api';
import { ironOptions } from '@/config/iron-config';
import { AuthData } from '@/models/AuthData';
import { getIronSession } from 'iron-session';
import { NextApiRequest, NextApiResponse } from 'next';
import fetch from 'node-fetch';
import FormData from 'form-data';
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const session = await getIronSession<AuthData>(req, res, ironOptions);
const body = req.body;
//
//Convert Base64 to Buffer
const buffer = Buffer.from(JSON.parse(body).file, 'base64');
// Create a new FormData instance
const formData = new FormData();
formData.append('file', buffer);
//
let url = `${API_ENDPOINTS['upload_media'].url}`;
let method = API_ENDPOINTS['upload_media'].type;
var myHeaders = new Headers();
myHeaders.append('Authorization', `JWT ${session.token}`);
myHeaders.append('Content-Type', formData.getHeaders()['content-type']);
// retrieve user data from database then:
const response = await fetch(url, {
method: method,
headers: myHeaders,
body: formData,
});
// if there's an error, return it
const data = await response.json();
if (response.status >= 400) return res.status(response.status).json(data);
return res.status(response.status).json(data);
}
For the client-side implementation, here's how you can obtain the base64 string:
function getBase64(file: File) {
var fileReader = new FileReader();
if (file) {
fileReader.readAsDataURL(file);
}
return new Promise<string | null>((resolve, reject) => {
fileReader.onload = function (event: any) {
resolve(event?.target?.result);
};
});
}
const reader = new FileReader();
reader.onload = (e: any) => {
setSelectedFile(e.target.result);
};
reader.readAsDataURL(event.target.files[0]);
let result: string | null = await getBase64(event.target.files[0]);