Html Question posted in
Some basic documentation can be found here.

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

Tags:

2

Answers


  1. 0

    This can be done with jquery

    $(‘#pdfRenderer’).text(”); //cleaning div pdfRenderer
    PDFObject.embed(file, "#pdfRenderer"); //we put the selected PDF file in the preview

    Login or Signup to reply.
  2. 0

    Try This
    Assuming that you only extract jpeg image

      function convertToPDF() {
  const imageInput = document.getElementById('file');
  const name = document.getElementById("name").value;
  const email = document.getElementById("email").value;
  
  // Check if a file is selected
  if (imageInput.files.length === 0) {
    alert('Please select an image file.');
    return;
  }
  
  const file = imageInput.files[0];
  const reader = new FileReader();
  
  reader.onload = function(event) {
    const imageDataUrl = event.target.result;
    
    // Create image element
    const img = new Image();
    img.src = imageDataUrl;
    
    // When image is loaded, convert to PDF
    img.onload = function() {
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      canvas.width = img.width;
      canvas.height = img.height;
      context.drawImage(img, 0, 0);
      
      // Convert canvas to Blob
      canvas.toBlob(function(blob) {
        // Create PDF
        const pdfElement = document.createElement('div');
        // Include name and email in PDF content
        const textElement = document.createElement('div');
        textElement.innerHTML = `<p>Name: ${name}</p><p>Email: ${email}</p>`;
        pdfElement.appendChild(textElement);

        pdfElement.appendChild(img);
        const opt = {
          margin: 1,
          filename: 'image_to_pdf.pdf',
          image: { type: 'jpeg', quality: 0.98 },
          html2canvas: { scale: 2 },
          jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
        };
        html2pdf().from(pdfElement).set(opt).save();
      }, 'image/jpeg');
    };
  };
  
  reader.readAsDataURL(file);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search