I am trying to send res.json after I successfully save data in database and save the upload the image but I am constantly getting API resolved without sending a response for /api/auth/registeration, this may result in stalled requests.. Also I am using formidable for image upload in Next.js.
code:
import connection from "../../../utils/connection/getConnection";
import formidable from "formidable";
const signupSchema = require("../../../models/signup");
import mkdirp from "mkdirp";
import bcrpt, { genSaltSync } from "bcrypt";
import fs from "fs";
export const config = {
api: {
bodyParser: false,
},
};
const handlePost = async (req, res) => {
const form = formidable.IncomingForm();
form.parse(req, async function (err, field, files) {
await fileSavour(field, files);
return res.json({
message: "success",
});
});
};
const fileSavour = async (fields, files) => {
let { email, password } = fields;
let imageName = files.image.name;
let newPassword = await bcrpt.hash(password, genSaltSync(10));
const newUser = new signupSchema({
email,
password: newPassword,
image: imageName,
});
const Nuser = await newUser.save();
if (Nuser) {
await mkdirp("public/profileImages/" + Nuser._id);
if (imageName) {
const data = fs.readFileSync(files.image.path);
const pathToSave = "public/profileImages/" + Nuser._id + "/" + imageName;
fs.writeFileSync(pathToSave, data);
await fs.unlinkSync(files.image.path);
return;
}
}
};
const Register = async (req, res) => {
req.method === "POST"
? handlePost(req, res)
: req.method === "PUT"
? console.log("PUT")
: req.method === "DELETE"
? console.log("DELETE")
: req.method === "GET"
? console.log("GET")
: res.status(404).send("");
};
export default Register;
The handlePost handler function will not wait for the form.parse callback to execute (and subsequently for res.json to be called), and will return immediately. To prevent this, you can wrap the form.parse with a Promise to ensure the handler waits for the callback function to execute.
const handlePost = async (req, res) => {
const form = formidable.IncomingForm();
await new Promise(function(resolve, reject) {
form.parse(req, async function(err, fields, files) {
await fileSavour(field, files);
resolve();
});
});
res.json({ message: "success" });
};
You need to promisify the form.parse function. Currently, your request is returned before the form is parsed.
Let's define a function which promisifies the form parse using formidable, and use it to parse all the requests. The function should look like this -
const promisifiedParseForm = (req) => {
const form = formidable.IncomingForm();
return new Promise((resolve, reject) => {
form.parse(req, function (err, field, files) {
if (err) {
reject(err)
} else {
resolve({ field, files })
}
});
});
}
Use the promisifiedParseForm function in the handlePost function, like this -
const handlePost = async (req, res) => {
const { field, files } = await promisifiedParseForm(req);
await fileSavour(field, files);
return res.json({
message: "success",
});
};