Tiny File Manager

Back Back Up Advanced Editor

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>How to Embed PDF File in HTML</title>
    <style>

</style>
</head>

<body>
    <div class="phppot-container">
        <h1>How to Embed PDF File in HTML</h1>
        <div id="error-message" class="error" style="display: none;">Invalid PDF file. Please select a valid PDF file.
        </div>
        <input type="file" id="pdf-input" class="row" accept=".pdf" onchange="loadPDF(this)">
        <div class="pdf-embed-container" id="pdf-header" style="display: none;">
            <h2 id="pdf-filename">PDF File: <span id="filename"></span></h2>
            <div id="pdf-embed"></div>
        </div>
    </div>

// Get references embed PDF on a page
            var errorMessage = document.getElementById('error-message');
            var pdfContainer = document.getElementById('pdf-embed');
            var pdfHeader = document.getElementById('pdf-header');
            var filenameSpan = document.getElementById('filename');

// Clear error message from the screen initially
            errorMessage.style.display = 'none';

// Validate if the chosen file type is PDF
            if (file && file.type === 'application/pdf') {
                // Create a data URL for the PDF file
                var pdfPath = URL.createObjectURL(file);

// Create a target iframe element to embed the PDF
                var iframe = document.createElement('iframe');
                iframe.src = pdfPath;
                iframe.width = '100%';
                iframe.height = '100%';
                iframe.style.border = 'none';

// Clear the existing and embed recently chosen PDF on a page
                pdfContainer.innerHTML = '';
                pdfContainer.appendChild(iframe);

// Display the PDF filename above the embed
                filenameSpan.textContent = file.name;
                
                // Display the PDF container and header
                pdfContainer.style.display = 'block';
                pdfHeader.style.display = 'block';
            } else {
                // Display an error message if the selected file is not a PDF
                errorMessage.style.display = 'block';
                pdfContainer.style.display = 'none';
                pdfHeader.style.display = 'none';
            }
        }
    </script>
</body>

</html>