I’m reworking my question as I completely redesigned my API because of a key issue. The fact I have a “file” and it’s a multipart/form-data, I needed a form handler since NextJS doesn’t have one. So I worked it around “multiparty”, where I can actually parse the multipart/form-data coming in from the form. This is the API I use now:
import mysql from "mysql2/promise";
import multiparty from "multiparty";
export default async function handler(req, res) {
const dbconnection = await mysql.createConnection({
host: "localhost",
database: "onlinestore",
port: 3306,
user: "root",
password: "Jennister123!",
});
try {
const form = new multiparty.Form()
const data = await new Promise((resolve, reject) => {
form.parse(req, function (err, fields, files) {
if (err) reject({ err })
resolve({ fields, files })
})
})
const query = `INSERT INTO games (ProductID, ProductName, ProductDescription, ProductImage, ProductPrice, DateWhenAdded) VALUES ("${data.fields.ProductID}", "${data.fields.ProductName}","${data.fields.ProductDescription}","${data.fields.ProductImage}","${data.fields.ProductPrice}","${data.fields.DateWhenAdded}")`
await dbconnection.execute(query, data);
dbconnection.end();
data.forEach((games) => {
games.ProductImage = "data:image/webp;base64," + games.ProductImage.toString('base64');
}
);
data.forEach((games) => {
var d = new Date(games.DateWhenAdded);
var now = moment(d).format('l');
console.log(now);
}
);
res.status(200).json({ games: data });
} catch (error) {
res.status(500).json({ error: error.message });
}
}
export const config = {
api: {
bodyParser: false,
}
}
And obviously from another question, this is the form I’m using:
<!DOCTYPE html>
<html lang = "en">
<head>
<title>
New Game Addition
</title>
</head>
<body>
<form method="post" action="/api/newgame" enctype="multipart/form-data">
<input type="number" id = "ProductID" name="ProductID" placeholder="Product ID"> <br />
<input type="text" id = "ProductName" name="ProductName" placeholder="Name of Product."> <br />
<input type="text" id = "ProductDescription" name="ProductDescription" placeholder="Describe the Product."> <br />
<input type="file" id = "ProductImage" name="ProductImage" placeholder="Put in Image"> <br />
<input type="number" step="0.01" id = "ProductPrice" name="ProductPrice" placeholder="0.00"> <br />
<input type="date" id = "DateWhenAdded" name="DateWhenAdded" placeholder="01/01/2001"> <br />
<input type="submit" name="submit" value="SUBMIT">
</form>
</body>
</html>
However, I have a problem to where I get this error on my browser.
{"error":"Bind parameters must be array if namedPlaceholders parameter is not enabled"}
Does anyone know how to fix this error so I can get my query to run?