JSFiddle - React, Tailwind, and code Playground

by sazakharov

HTML

<div class="main">
    <a href="http://www.ant-logistics.com.ua/ui/import.xlsx">Пример файла Excel</a>
    <progress id="progress"></progress>
    <div class="filedrag" id="comps">Перетащите файл <span class="red">сюда</span></div>
    <div class="result"></div>
</div>

<script src="http://www.ant-logistics.com.ua/plugin/zip/zip.js"></script>
<script src="http://www.ant-logistics.com.ua/plugin/zip/dataview.js"></script>
<script src="http://www.ant-logistics.com.ua/plugin/zip/deflate.js"></script>
<script src="http://www.ant-logistics.com.ua/plugin/zip/inflate.js"></script>
<script src="http://www.ant-logistics.com.ua/plugin/zip/zip-fs.js"></script>

CSS

progress {
    float: right;
    width:300px;
    display: none;
}

.result {
    border-top: 2px solid gray;
    padding-top: 2px;
}

.filedrag
{
    font-size: 35px;
    font-weight: bold;
    text-align: center;
    padding: 122px 0;
    margin: 10px 0;
    color: #555;
    border: 2px dashed #555;
    border-radius: 7px;
    cursor: default;
}
.filedrag.hover
{
    border-color: #f00;
    border-style: solid;
    box-shadow: inset 0 3px 4px #888;
}
.red {
    color:red;
}

JavaScript

var c = document.getElementById("comps"),
    FileDragHover = function (e) {
     e.stopPropagation();
     e.preventDefault();
     if(e.target.id==='comps')
       e.target.className = (e.type == "dragover" ? "filedrag hover" : "filedrag");
     else
       c.className = (e.type == "dragover" ? "filedrag hover" : "filedrag");
    }
c.addEventListener("drop", function(e){
    e.preventDefault();

    c.className = "filedrag";
    var files = e.target.files || e.dataTransfer.files;
    for (var i = 0, f; f = files[i]; i++) {
        if(f.name.toLowerCase().indexOf('xlsx')<=0) {
            alert('Это не Excel ;)');
        } else {
            zip.createReader(new zip.BlobReader(f), function(reader) {
                // Получаем все файлы архива
                reader.getEntries(function(entries) {
                    console.info(entries)
                   return false;
               });
            }, function(error) {
                alert("Ошибка: " + error)
            });
        }
    }
    
    return false;
}, false);

c.addEventListener("dragover", FileDragHover, false);
c.addEventListener("dragleave", FileDragHover, false);