<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>EPUB Drag & Drop Viewer</title>
<script src="https://unpkg.com/epubjs/dist/epub.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#drop-zone {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
border: 3px dashed #ccc;
box-sizing: border-box;
font-size: 1.5em;
text-align: center;
color: #999;
transition: background-color 0.3s, border-color 0.3s;
}
#drop-zone.dragover {
background-color: #f0f8ff;
border-color: #333;
color: #333;
}
#viewer {
width: 100%;
height: 100vh;
display: none; /* Hidden until file is loaded */
}
</style>
</head>
<body>
<div id="drop-zone">Drag & Drop EPUB File Here</div>
<div id="viewer"></div>
<script>
const dropZone = document.getElementById('drop-zone');
const viewer = document.getElementById('viewer');
let rendition;
let book;
// Handle drag over
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.classList.add('dragover');
});
// Handle drag leave
dropZone.addEventListener('dragleave', () => {
dropZone.classList.remove('dragover');
});
// Handle drop
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.classList.remove('dragover');
const files = e.dataTransfer.files;
if (files.length > 0) {
const file = files[0];
if (file.name.endsWith('.epub') || file.type === 'application/epub+zip') {
loadEPUBFile(file);
} else {
alert('Please drop a valid EPUB file.');
}
}
});
function loadEPUBFile(file) {
// Show the viewer and hide the drop zone
dropZone.style.display = 'none';
viewer.style.display = 'block';
// Create a URL for the dropped file
const fileURL = URL.createObjectURL(file);
// Initialize EPUB.js with the file URL
book = ePub(fileURL);
// Render the book
rendition = book.renderTo("viewer", {
width: "100%",
height: "100%",
});
// Display the first chapter
rendition.display();
}
</script>
</body>
</html>