How to Create a Multi-Format Document Viewer with jQuery & HTML
Looking for a way to preview multiple file formats directly in your browser? Whether it’s PDFs, images, or videos, having a multi-format document viewer can improve user experience and streamline file handling. In this tutorial, we’ll guide you through building a Multi-Format Document Viewer using HTML, jQuery, and JavaScript.
This viewer will allow users to upload and preview PDFs, images, and videos effortlessly while providing a message for unsupported document types like DOCX, PPTX, and other Office files.
Let’s dive in! 🚀
📌 Features of the Multi-Format Document Viewer
✅ Supports various file types: PDF, DOC, DOCX, PPT, PPTX, images (PNG, JPG, GIF), and videos (MP4, WebM).
✅ Dynamic file handling: Uses jQuery to identify and preview the uploaded file based on its type.
✅ Embedded preview system: Displays PDFs, images, and videos within the viewer container.
✅ Reset/Remove button: Allows users to clear the uploaded file and reset the viewer.
Step-by-Step Guide to Building the Viewer
1️⃣ Setting Up the HTML Structure
We’ll start by creating a simple HTML structure that includes:
- A file input field for uploading documents.
- A container to display the selected file.
- A “Reset” button to remove the uploaded file.
📝 HTML Code (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Format Document Viewer</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Multi-Format Document Viewer</h2>
<input type="file" id="fileInput" accept=".pdf,.doc,.docx,.ppt,.pptx,.png,.jpg,.jpeg,.gif,.mp4,.webm">
<div id="viewer-container">
<iframe id="pdfViewer"></iframe>
<img id="imageViewer">
<video id="videoViewer" controls></video>
<p id="docMessage">❌ DOCX/PPTX cannot be previewed. Please open them manually.</p>
</div>
<div class="btn-group">
<button id="resetButton" style="display: none;">Remove / Reset</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2️⃣ Adding CSS for Styling
To make the document viewer visually appealing, we add some styling. The CSS file (styles.css) ensures proper layout, button styling, and responsiveness.
🎨 CSS Code (styles.css)
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 800px;
margin: auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
#viewer-container {
width: 100%;
height: 500px;
margin: 20px 0;
border: 2px solid #ddd;
border-radius: 10px;
overflow: hidden;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
iframe, video, img {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
display: none;
}
#docMessage {
display: none;
font-size: 18px;
color: red;
}
.btn-group {
margin-top: 10px;
}
button {
padding: 10px 15px;
border: none;
background: #007bff;
color: white;
cursor: pointer;
border-radius: 5px;
margin: 5px;
font-size: 16px;
}
button:hover {
background: #0056b3;
}
#resetButton {
background: #dc3545;
}
#resetButton:hover {
background: #a71d2a;
}
3️⃣ Adding jQuery for File Handling
To handle file uploads dynamically, we use jQuery. The script detects the selected file type and displays the appropriate viewer (PDF, image, or video). If the file type isn’t supported, a message appears.
📝 JavaScript Code (script.js)
$(document).ready(function () {
$("#fileInput").change(function (event) {
let file = event.target.files[0];
if (!file) return;
let fileType = file.type;
let fileURL = URL.createObjectURL(file);
// Hide all viewers
$("#pdfViewer, #imageViewer, #videoViewer, #docMessage").hide();
// Determine file type and display accordingly
if (fileType.includes("pdf")) {
$("#pdfViewer").attr("src", fileURL).show();
} else if (fileType.includes("image")) {
$("#imageViewer").attr("src", fileURL).show();
} else if (fileType.includes("video")) {
$("#videoViewer").attr("src", fileURL).show();
} else if (fileType.includes("officedocument") || fileType.includes("msword") || fileType.includes("vnd.ms-powerpoint")) {
$("#docMessage").show();
} else {
alert("Unsupported file type. Please select a valid document, image, or video.");
}
// Show reset button
$("#resetButton").show();
});
// Reset / Remove File
$("#resetButton").click(function () {
$("#fileInput").val("");
$("#pdfViewer, #imageViewer, #videoViewer, #docMessage").hide();
$("#resetButton").hide();
});
});
🔹 How It Works
- The user selects a file.
- The script checks the file type and determines whether it’s a PDF, image, or video.
- If the file type is supported, the appropriate viewer (iframe, image, or video) is displayed.
- If the file is an unsupported Office document (DOCX, PPTX, etc.), a message appears.
- The “Reset” button allows users to remove the uploaded file and reset the viewer.
🔗 GitHub & Demo
💻 GitHub Source Code: Madras Academy – Document Viewer
🎥 YouTube Tutorial:
💡 Why Use This Viewer?
This document viewer is perfect for web developers, students, and anyone building a file preview system. Whether you’re working on a document-sharing platform, an educational site, or a business application, this feature improves file accessibility.
🚀 Try it out and enhance your web applications today!
If you found this tutorial helpful, don’t forget to LIKE 👍, SHARE 🔄 & SUBSCRIBE 🔔 to Madras Academy for more awesome tutorials!
#MadrasAcademy #HTML #JavaScript #jQuery #DocumentViewer #WebDevelopment #FilePreview