Createlaptop.Jsx file is frontend it has a form which passes all values (name, gen, sir, hasGraphicCard, price, image) to the server.Jsx backend where these query craete a newfield in table. Only issue is when i enter in imagefile textbox this value”LOAD_FILE(‘F:React_Internshipsof1.jpeg’)” it creates a 44butes of blob data in database table whereas if executing sql command it creastes 64kb of data

this the MySQL command cannot execute the value fully from the backend to my MySQL
after loading the image only 44Bytes is passed instead of whole 64KB. This is MySQL query

CreateLaptop.jsx---frontend
const handleImageChange = (e) => {
const filePath = e.target.value;
console.log(filePath);
setBook((prev) => ({ ...prev, image: filePath }));
};

return (
<div class="form">
    <input
        type="text" // Change input type to text
        name="image"
        placeholder="File path"
        onChange={handleImageChange}
    />
</div>
);

server.jsx----backend
 app.post("/books", (req, res) => {
try {

const { name, gen, sir, hasGraphicCard, price ,image} = req.body;
  const q = "INSERT INTO laps(`name`, `gen`, `sir`, `hasGraphicCard`, `price`, `image`) VALUES        
 (?, ?, ?, ?, ?,?)";
  const values = [name, gen, sir, hasGraphicCard, price, image];

  db.query(q, values, (err, data) => {
    if (err) {
      console.error("Error inserting book data:", err);
      res.status(500).json({ error: "Internal server error" });
      return;
    }
    res.json({ message: "laptop data inserted successfully", data });
  });

   } catch (error) {
console.error("Error handling file upload:", error);
res.status(500).json({ error: "Internal server error" });
   }
 });
 database-------query
  INSERT INTO laps (name, gen, sir, hasGraphicCard, price, image)
    VALUES ('Laptop Name', 'Laptop Generation', 'Laptop Serial number', true, 999.99, 
 LOAD_FILE('F:\of1.jpeg'))