how to extract file from the file input in html

i am trying to extract the file from the file input and , i am also trying that when user click on the sign in button , the content must be downloaded in form of pdf in the user device , i am able to do that , but the file isn’t coming in the pdf .

what i have tried

**hmtl file ** 

     ` <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
<link rel="stylesheet" href="huehue.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js">                </script>
    <title>File Upload Example</title>
      </head>
 <body>
   <h1>File Upload Example</h1>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <form id="myForm">
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name" required><br>
    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email" required><br><br>
     <input type="file" name="file" id="file">
     <button type="button" onclick="generatePDF()">Download PDF</button>
   </form>
   <script>
   function generatePDF() {
    const file=document.getElementById('file').value
    const name = document.getElementById('name').value
    const email = document.getElementById('email').value
    const element = document.getElementById('myForm');
     html2pdf().from(` Name : -${name}<br>+" "+`Email- ${email}<br>+""+${file}`).save();
    console.log(name)
    }
   </script>
   </body>
   </html>`

** i am getting the file path , but i want the whole file and it’s content**