How to preview uploaded file pdf or doc or image in modal popup

Question

image is displaying but files are not displaying when i want to preview them.

Deepak Rawat · Answer

Hi, you can use a combination of HTML, CSS, and JavaScript to see the preview uploaded files such as PDF, DOC, or images in a modal popup Open Preview &times; /* Styling for the modal */ .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.8); } .modal-content { margin: 10% auto; max-width: 600px; background-color: #fefefe; padding: 20px; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } /* Styling for the file preview */ #filePreviewContainer { max-width: 100%; max-height: 80vh; overflow: auto; } #filePreviewContainer img { max-width: 100%; height: auto; } // Function to open the modal function openModal() { const modal = document.getElementById("previewModal"); modal.style.display = "block"; } // Function to close the modal function closeModal() { const modal = document.getElementById("previewModal"); modal.style.display = "none"; } // Event listener for the close button document.getElementsByClassName("close")[0].addEventListener("click", closeModal); // Event listener for the open button document.getElementById("openModalBtn").addEventListener("click", openModal); // File input change event document.getElementById("fileInput").addEventListener("change", function(event) { const file = event.target.files[0]; const filePreviewContainer = document.getElementById("filePreviewContainer"); if (file.type.includes("image")) { // Display image preview const reader = new FileReader(); reader.onload = function() { const img = document.createElement("img"); img.src = reader.result; filePreviewContainer.innerHTML = ""; filePreviewContainer.appendChild(img); }; reader.readAsDataURL(file); } else if (file.type.includes("pdf") || file.type.includes("doc")) { // Display file name for PDF or DOC files filePreviewContainer.innerText = file.name; } else { // Unsupported file type filePreviewContainer.innerText = "Unsupported file type"; } }); In the above code, you have an input element with the id "fileInput" for file upload. When a file is selected, the change event is triggered. Depending on the file type, it either displays an image preview or the file name in the modal popup to replace the fileInput element with your actual file input element in your HTML. Additionally, you may need to customize the styles to match your design requirements. Remember to include this code within the appropriate tags and ensure that you have correctly included the required HTML and CSS.

Tarun · Answer

Thank you its working but when i upload .xlsx file will it show its preview????

How to preview uploaded file pdf or doc or image in modal popup

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (2)