How to extract file from the file input in HTML?

ghz 7months ago ⋅ 82 views

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 its content

Answers

To download the content of the file selected by the user in the form of a PDF, you need to first read the contents of the file using JavaScript. However, due to security restrictions, modern browsers do not allow direct access to the contents of a file selected via a file input field for privacy reasons.

Instead, you can use the HTML5 File API to read the file contents asynchronously. Once you have the file content, you can include it in your PDF using html2pdf. Here's how you can modify your code to achieve this:

<!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 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 name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const fileInput = document.getElementById('file');
            const file = fileInput.files[0]; // Get the selected file

            if (file) {
                const reader = new FileReader(); // Create a new FileReader object

                reader.onload = function(event) {
                    const fileContent = event.target.result; // Get the file content

                    // Create a PDF document
                    const element = document.createElement('div');
                    element.innerHTML = `Name: ${name}<br>Email: ${email}<br>File Content: ${fileContent}`;
                    
                    // Save the PDF
                    html2pdf().from(element).save();
                };

                reader.readAsText(file); // Read the file as text
            } else {
                alert('Please select a file.');
            }
        }
    </script>
</body>
</html>

In this code:

  • We first check if a file has been selected by the user.
  • If a file is selected, we use the FileReader object to read the contents of the file asynchronously.
  • Once the file content is read, we create a PDF document using html2pdf and include the name, email, and file content in the PDF.
  • Finally, we save the PDF to the user's device.
#forms