JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post" action="#">
  <input type="text" id="name">
  <input type="text" id="price">
  <input type="file" id="file">
  <input type="hidden" id="file_data">
  <input type="button" value="Send" onclick="send()">
</form>

JavaScript

const blobToData = (blob) => {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.readAsDataURL(blob)
  })
}

async function send() {

  let data = {
    name: document.getElementById('name').value,
    price: document.getElementById('price').value,
  };
  
  let file = document.getElementById('file').files[0];
  data.file = await blobToData(file);
  console.log(data);

}