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

Thank you 

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

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



  

    ×
    

  

/* 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