Событие HTML5 ondrop возвращается до того, как zip.js может завершить операции

Суть моей проблемы в том, что мне нужно использовать асинхронно datatransferitemlist, что противоречит функциональности, описанной в спецификациях, а именно: вы заблокированы из коллекции dataTransfer.items после завершения события.

https://bugs.chromium.org/p/chromium/issues/detail?id=137231 http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#drag-data-store

Преступник дела следующий. Более подробное описание моей проблемы и мысли ниже.

drophandler: function(event) {
    event.stopPropagation();
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';
    zip.workerScriptsPath = "../bower_components/zip.js/WebContent/";
    zip.useWebWorkers = false; // Disabled because it just makes life more complicated
    // Check if files contains just a zip
    if (event.dataTransfer.files[0].name.match(/(?:\.([^.]+))?$/) == 'zip') {
        var reader = new FileReader();
        that = this;
        reader.onload = function(e) {
            that.fire('zipuploaded', e.target.result.split(',')[1]);
        }
        reader.readAsDataURL(event.dataTransfer.files[0]);
        // Rev up that in browser zipping
    } else {
        var that = this;
        var items = event.dataTransfer.items;
        // Async operation, execution falls through from here
        zip.createWriter(new zip.Data64URIWriter(), function(writer) {
            (function traverse(list, path, i, depth) {
                return new Promise(function(resolve, reject) {
                    var item;
                    if (depth == 0) {
                        if (i == list.length) {
                            writer.close(function(uri) {
                                that.fire('zipuploaded', uri.split(',')[1]); // Just the base64, please
                                fulfill(1);
                                return;
                            });
                        } else {
                            console.log(i);
                            console.log(list);
                            var item = list[i].webkitGetAsEntry();
                        }
                    } else {
                        if (i == list.length) {
                            resolve(0);
                            return;
                        } else {
                            item = list[i];
                        }
                    }
                    if (item.isFile) {
                        item.file(function(file) {
                            // Zipping operations done asynchronously, it'll fail by roughly the second operation
                            writer.add(path + file.name, zip.BlobReader(file), function() {
                                traverse(list, path, i + 1, depth).then(resolve(0)); // Next item
                            });
                        });
                    } else if (item.isDirectory) {
                        var dirReader = item.createDirReader();
                        dirReader.readEntries(function(entries) {
                            // Operate on child folder then the next item at this level
                            traverse(entries, path + item.name + "/", 0, depth + 1).then(function() {
                                traverse(list, path, i + 1, depth).then(resolve(0));
                            });
                        });
                    }
                });
            })(items, "", 0, 0); // Begin with datatransferitemlist, 0th element, depth 0
        });
        this.$.uploadarea.classList.remove('highlightdrag');
    }
    // When we exit it kills the event.dataTransfer.items
},

Я использую zip.js, который является асинхронным с API-интерфейсом HTML5 DnD. Событие ondrop заканчивается до завершения операций асинхронного zip.createWriter/writer.add. Я могу подумать о четырех способах решения этой проблемы, хотя я не знаю, как реализовать любой из них, и хотел бы получить некоторые советы.

Заблокировать до создания createWriter. (Блокировка javascript? Uhoh)
Предотвратите блокировку ядро из dataTransfer.items(кажется, для безопасности так маловероятно)
Синхронно копировать содержимое dataTransfer.items сначала (возможно, очень медленно)
Делать все синхронно (не думаю, что zip.js позволяет это, JsZip делает, но я отошел от этого из-за того, что он имел свои ограничения с большими файловыми наборами)

Ответ 1

HTML5 DnD работает так, как ожидалось. Проблема заключается в том, что при добавлении нескольких файлов, если вы добавляете файл перед предыдущим завершением, zip.js прерывается молча. Это можно устранить, вызвав последовательно writer.add.

Откат может не работать, вместо этого pen.

В этом примере помещается структура отброшенных файлов, а затем добавляется в zip последовательно.

function mes(it) {
  const m = document.querySelector('#mes')
  return m.textContent = it + '\n' + m.textContent
}

function read(items) {
  return Promise.all(items.map(item => {
    if (item.isFile) return [item]
    return new Promise(resolve => item.createReader().readEntries(resolve))
    .then(entries => {
      entries.forEach(it => it.path = item.path + '/' + it.name)
      return read(entries)
    })
  })).then(entries => entries.reduce((a, b) => a.concat(b)))
}

function handleResult(blob){
  const res = document.querySelector('#result')
  res.download = 'files.zip'
  res.href = window.URL.createObjectURL(blob)
  res.textContent = 'download zipped file'
}

function handleItems(items){
  mes(items.length)
  items.forEach(item => item.path = item.name)
  const initZip = new Promise(resolve =>
    zip.createWriter(new zip.BlobWriter, resolve)
  )
  const getFiles = read(items).then(entries => {
    return Promise.all(entries.map(entry =>
      new Promise(resolve =>
        entry.file(file => {
          file.path = entry.path
          resolve(file)
        })
      )
    ))
  })
  return Promise.all([getFiles, initZip]).then(([files, writer]) =>
    files.reduce((current, next) =>
      current.then(() =>
        new Promise(resolve => {
          mes(next.path)
          writer.add(next.path, new zip.BlobReader(next), resolve)
        })
      )
    , Promise.resolve())
    .then(() => writer.close(handleResult))
  )
}

zip.useWebWorkers = false
const drop = document.querySelector('#drop');

['dragover', 'drop'].forEach(name =>
  drop.addEventListener(name, ev => ev.preventDefault())
)
drop.addEventListener('drop', ev => {
  const items = [].slice.call(ev.dataTransfer.items)
  .map(item => item.webkitGetAsEntry())
  return handleItems(items)
})

html, body, #drop {
  height: 100%;
  width: 100%;
}

<script src="http://gildas-lormeau.github.io/zip.js/demos/zip.js"></script>
<script src="http://gildas-lormeau.github.io/zip.js/demos/deflate.js"></script>


<div id="drop">
  Drop here!
  <br>
  <a id="result"></a>
</div>
<pre id="mes"></pre>