Переместить файлы в браузер

Переместить курсором мыши файлы или папки с файлами с рабочего стола в браузер для редактирования, обмена, изменения размера и т.д.

Оглавление:
  1. Переместить файлы
  2. Переместить папки с файлами

Демо

Переместить файлы

Переместить курсором мыши файл или файлы с рабочего стола в ваш браузер. Обратите внимание, при попытке перетащить папку будет сбой.

<div id="dropzone"></div>
var dropzone = document.getElementById('dropzone');
  dropzone.ondrop = function(e) {
  var length = e.dataTransfer.files.length;
  for (var i = 0; i < length; i++) {
  var file = e.dataTransfer.files[i];
  ... // делай что хочешь
  }
  };
к меню ↑

Переместить папки с файлами

<div id="dropzone"></div>
var dropzone = document.getElementById('dropzone');
  dropzone.ondrop = function(e) {
  var length = e.dataTransfer.items.length;
  for (var i = 0; i < length; i++) {
  var entry = e.dataTransfer.items[i].webkitGetAsEntry();
  if (entry.isFile) {
  ... // делай что хочешь
  } else if (entry.isDirectory) {
  ... // делай что хочешь
  }
  }
  };

Пользователи могут курсором мыши переместить сотни фотографий для редактирования.

var fs = null; 
  function onDrop(e) {
  e.preventDefault();
  e.stopPropagation();

  var items = e.dataTransfer.items;

  for (var i = 0, item; item = items[i]; ++i) {
  var entry = item.webkitGetAsEntry();

  if (entry.isDirectory) {
  entry.copyTo(fs.root, null, function(copiedEntry) {
  // ...
  }, onError);
  }
  }
  }

  window.webkitRequestFileSystem(TEMPORARY, 1024 * 1204, function(fileSystem) {
  fs = fileSystem;
  }, function(e) {
  console.log('Error', e);
  });

Функция .webkitGetAsEntry() делает импорт файлов и целых папок. FileEntry или DirectoryEntry использует CopyTo(), чтобы получить файлы и импортировать их в приложение.

Возможность переместить папки или файлы в браузер предоставляет нам input type="file".

<input type="file" multiple="multiple" />
function onChange(e) {
  e.stopPropagation();
  e.preventDefault();

  var entries = e.target.webkitEntries;
  [].forEach.call(entries, function(entry) {

    // Copy the entry into our local filesystem.
    entry.copyTo(fs.root, null, function(copiedEntry) {
      ...
    }, onError);

  });
}
document.querySelector('input[type="file"]').addEventListener('change', onChange);