Загрузка файлов и каталогов перетаскиванием с помощью drag and drop JS

На многих веб-сайтах есть форма для загрузки файла. Для некоторых сайтов, таких как OneDrive или Google Диск, загрузка файлов является основной функцией. С течением времени веб-страницы становятся все более интерактивными. Таким образом, пользователи ожидают большего количества взаимодействий, таких как перетаскивание файлов или каталогов или вставка скриншотов.

Давайте посмотрим, что предоставляют браузеры для загрузки файлов!

<form method="post" enctype="multipart/form-data">
    <input type="file" name="photo">
    <input type="submit" value="Submit">
</form>

Вы можете улучшить это с помощью двух необязательных атрибутов:

• multiple: позволяет выбрать несколько файлов

• accept: выберите ожидаемые mime types, например: image/*, application/pdf

Drag and drop файлов

Большинство пользователей ожидают, что смогут перетаскивать файлы на страницу. Эта функциональность хорошо поддерживается браузерами и очень проста в реализации. Как только вы получите файлы, вам нужно что-то сделать, например, загрузить их в API или прочитать их содержимое с помощью FileReader api.

const dropZone = document.body;
if (dropZone) {
    let hoverClassName = 'hover';
  
    dropZone.addEventListener("dragenter", function(e) {
        e.preventDefault();
        dropZone.classList.add(hoverClassName);
    });
  
    dropZone.addEventListener("dragover", function(e) {
        e.preventDefault();
        dropZone.classList.add(hoverClassName);
    });
  
    dropZone.addEventListener("dragleave", function(e) {
        e.preventDefault();
        dropZone.classList.remove(hoverClassName);
    });
  
    // Это самое важное событие, событие, которое дает доступ к файлам
    dropZone.addEventListener("drop", function(e) {
        e.preventDefault();
        dropZone.classList.remove(hoverClassName);

        const files = Array.from(e.dataTransfer.files);
        console.log(files);
        // TODO что-то делает с файлами...
    });
}

Вы можете легко загружать файлы в API, используя fetch API:

if (files.length > 0) {
    const data = new FormData();
    for (const file of files) {
        data.append('file', file);
    }

    fetch('/upload', {
        method: 'POST',
        body: data
    })
    .then(() => console.log("file uploaded"))
    .catch(reason => console.error(reason));
}

Drag and drop директорий

Google Chrome и Microsoft Edge теперь поддерживают перетаскивание каталогов. Это очень полезно, если вы хотите загрузить свои файлы в OneDrive или Google Диск. API не очень удобен, так как использует функции обратного вызова с рекурсивным деревом, но это не так сложно. Давайте посмотрим на какой-нибудь код:

// drag* события опущены для краткости (получите их из предыдущего раздела).
dropZone.addEventListener('drop', async function(e) {
    e.preventDefault();
    dropZone.classList.remove(hoverClassName);

    console.log(await getFileAsync(e.dataTransfer));
};

async function getFileAsync(dataTranfer) {
    const files = [];
    for (var i = 0; i < dataTranfer.items.length; i++) {
        const item = dataTranfer.items[i];
        if (item.kind === 'file') {
            if (typeof item.webkitGetAsEntry === 'function'){
                const entry = item.webkitGetAsEntry();
                const entryContent = await readEntryContentAsync(entry);
                files.push(...entryContent);
                continue;
            }

            const file = item.getAsFile();
            if (file) { files.push(file); }
        }
    }
    return files;
};

// Возвращает Promise со всеми файлами иерархии каталогов
function readEntryContentAsync(entry) {
    return new Promise((resolve, reject) => {
        let reading = 0;
        const contents = [];

        readEntry(entry);

        function readEntry(entry) {
            if (entry.isFile) {
                reading++;
                entry.file(file => {
                    reading--;
                    contents.push(file);

                    if (reading === 0) {
                        resolve(contents);
                    }
                });
            } else if (entry.isDirectory) {
                readReaderContent(entry.createReader());
            }
        };
      
        function readReaderContent(reader) {
            reading++;
            reader.readEntries(function(entries) {
                reading--;
                for (const entry of entries) {
                    readEntry(entry);
                }
                if (reading === 0) {
                    resolve(contents);
                }
            });
        };
    });
};

Теперь вы мастера загружать файлы и каталоги.