Fake path after uploading file in next js – mysql

I am trying to upload file and store in Mysql DB

i can upload but when its stored in DB the link will be like this:

C:fakepathblank.pdf

am i doing something wrong?

here is my code:
Pages folder:

export default function AddShopForm() {



const [product, setProduct] = useState({
file: "",
});

const router = useRouter();
const handleChange = ({ target: { name, value } }) => {
setProduct({ ...product, [name]: value });
};

const handleSubmit = async (e) => {
e.preventDefault();
if (router.query.id) {
  await axios.put(`/api/shops/${router.query.id}`, product);
  router.push("/dashboard/shop");
} else {
  await axios.post("/api/shops", product);
  router.push("/dashboard/shop");
  swal("The shop has been added successfully");
}
};

useEffect(() => {
const getProductById = async () => {
  const { data } = await axios.get(`/api/shops/${router.query.id}`);
  setProduct(data);
};

if (router.query.id) {
  getProductById(router.query.id);
  console.log("pepeID");
}
}, [router.query.id]);
return (
<>

<div className="w-full max-w-xs">
  <form
    onSubmit={handleSubmit}
    className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
    enctype="multipart/form-data"
  >
    

<label htmlFor="file">file</label>
<input
      type="file"
      name="file"
      onChange={handleChange}
      className="shadow border rounded py-2 px-3 text-gray-700"
      value={product.file}
    />

    <button className="bg-blue-500 hover:bg-blue-700 py-2 px-4 rounded focus:outline-none focus:shadow-outline font-bold text-white">
      Save file
    </button>
  </form>
</div>

);
}

API index:

import { pool } from "../../../config/db";
export default async function handler(req, res) {
const { method } = req;

switch (method) {
case "GET":
  return await getProdcuts(req, res);
case "POST":
  return await saveProduct(req, res);

default:
  break;
}
}

const saveProduct = async (req, res) => {
const { file } = req.body;
const [result] = await pool.query("INSERT INTO product SET ?", {
file 
});
console.log(result);
return res
.status(200)
.json({ file,
    id: result.insertId });
};

const getProdcuts = async (req, res) => {
const [result] = await pool.query("SELECT * FROM product;");
return res.status(200).json(result);
};

[id]:

import { pool } from "../../../config/db";

export default async function handler(req, res) {
switch (req.method) {
case "GET":
  return await getProdcutById(req, res);
case "DELETE":
  return await deleteProduct(req, res);
case "PUT":
  return await updateProduct(req, res);
default:
  break;
}
}

const getProdcutById = async (req, res) => {
const { id } = req.query;
const [result] = await pool.query("SELECT * FROM product WHERE id = ?", [id]);

return res.status(200).json(result[0]);
};

const deleteProduct = async (req, res) => {
const { id } = req.query;
const result = await pool.query("DELETE  FROM product WHERE id = ?", [id]);

return res.status(204).json();
};

const updateProduct = async (req, res) => {
const { id } = req.query;
const { file } = req.body;

//*Para Actualizar tengo que enviar dos cosas, el id y el body
try {
await pool.query(
  "UPDATE product SET business_type= ?, shop_name = ?,company_register_name = ? WHERE id = ?",
  [file , id]
);
return res.status(204).json();
} catch (error) {
console.log(error.message);
}
};

i was able to store other kind of data in db without any problem but whenever i upload a file i will get Fakepath

i am new to nextjs and still learning, i searched online but still wasn’t able to find an answer