Edit in JSFiddle

book = null;
document.getElementById('bookChooser').addEventListener('change', function(e) {
    var firstFile = e.target.files[0];
    if (window.FileReader) {
        var reader = new FileReader();
        reader.onload = function(e) {
            book = ePub({
                bookPath: e.target.result
            });

            book.renderTo("area");
            /* Replace area with the id for your div to put the book in */
        }.bind(this);

        reader.readAsArrayBuffer(firstFile);
    } else {
        alert("Your browser does not support the required features. Please use a modern browser such as Google Chrome, or Mozilla Firefox");
    }
});



document.getElementById("prev").onclick = function() {
    book.prevPage();
}

document.getElementById("next").onclick = function() {
    book.nextPage();
}

<div id="reader">
    <div id="toolbar">
        <div class="left">
            <span>Demo by <a href="http://github.com/geek1011" target="_blank">geek1011</a></span>
        </div>
        <div class="center">
            <input type="file" accept="application/epub+zip" id="bookChooser">
        </div>
        <div class="right">
            <button id="prev">&lt;</button>
            <button id="next">&gt;</button>
        </div>
    </div>

    <div id="area">

    </div>
</div>

html,
body {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

#reader {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: wheat;
    display: flex;
    flex-direction: column;
}

#reader #toolbar {
    flex: 0 1 auto;
    display: flex;
    justify-content: space-between;
    background: rgba(0,0,0,0.05);
    padding: 10px;
}

#reader #toolbar .left {
    flex: 0 1 auto;
}

#reader #toolbar .center {
    flex: 0 1 auto;
}

#reader #toolbar .right {
    flex: 0 1 auto;
}

#reader #area {
    flex: 1 0 auto;
    display: flex;
    position: relative;
}

#reader #area div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}