В сфере веб-разработки существует несколько способов загрузки файлов при сборе данных пользователя. Один из методов – копипаст. Копипаст для ввода файлов — очень интуитивно понятный метод загрузки файлов от пользователей. Метод копирования-вставки файлов избавляет пользователей от необходимости запоминать местоположение файла, который они хотят загрузить. В этой статье мы обсудим, как можно реализовать ввод файлов методом копирования и вставки на своем сайте.

Мы реализуем ввод файла копирования и вставки, используя преимущества интерфейсов ClipboadEvent и EventTarget. Интерфейс ClipboardEvent предоставляет информацию о событии вставки, а интерфейс EventTarget позволяет нам прослушивать событие вставки.

Во время прослушивания события вставки мы подключим функцию-обработчик события, с помощью которой решим, что делать с вставленными элементами. В нашем случае мы возьмем вставленный файл и отрендерим его сразу после полной загрузки в браузер. Мы начнем с HTML и стилей.

HTML и стили

Давайте начнем с создания HTML-разметки области вставки. Фрагмент кода ниже представляет собой HTML-разметку:

    
    
    
    


    

        Paste your file here
    
    

    

Приведенный выше фрагмент кода отображает прямоугольный контейнер, в который мы сможем вставлять файлы. Контейнер имеет атрибут contenteditable, для которого установлено значение true. Атрибут contenteditable важен для возможности вставки файлов или любых других элементов в контейнер. Если атрибут contenteditable изменен на false или удален, действие вставки не будет работать должным образом. У нас также есть контейнер с идентификатором предварительного просмотра. Мы будем использовать контейнер предварительного просмотра для предварительного просмотра изображения, вставленного пользователем.

Давайте добавим несколько основных стилей в нашу разметку из style.css

*{
    font-family: Arial, Helvetica, sans-serif;
}

body{
    text-align: center;
    margin-block-start: 4rem;
}
#pasteArea {
    border: 2px dashed #ccc;
    padding: 20px;
    width: 300px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    margin: auto;
    color: rgb(5, 89, 89);
}

#preview img {
    max-width: 100%;
    margin-top: 10px;
}

Приведенная выше таблица разметки и стилей создает простой контейнер с пунктирной рамкой и простым текстом подсказки, как показано на снимке экрана ниже:

Теперь, когда мы создали пользовательский интерфейс, давайте в следующем разделе добавим некоторые полезные функции с помощью JavaScript.

Сценарий

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

document.addEventListener('DOMContentLoaded', () => {
    const pasteArea = document.querySelector('#pasteArea');

    pasteArea.addEventListener('paste', (event) => {

    });
});

В приведенном выше фрагменте кода мы добавили прослушиватель события DOMContentLoaded. Это позволяет нам дождаться создания дерева DOM, прежде чем мы сможем получить элементы DOM. Затем мы выбираем контейнер области вставки и добавляем к нему прослушиватель событий вставки.

Получение файла из вставленных элементов

Обработчик события вставки остался нереализованным в предыдущем фрагменте кода. Давайте реализуем это, получая данные из объекта события и записывая их в консоль. Подробнее об этих данных мы поговорим позже в этой статье, а сейчас мы просто хотим убедиться, что файлы получены при вставке элементов в область вставки. В приведенном ниже фрагменте кода показана минимальная реализация обработчика события вставки.

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()

                console.log(file)
            }
        }
    })

В приведенном выше фрагменте кода мы получаем элементы из объекта event.clipboardData. Event.clipboardData.items — это DataTransferItemList, который представляет собой объект в виде списка, содержащий содержимое вставленных элементов. Элементы хранятся в списке, поскольку пользователь может копировать и вставлять несколько элементов одновременно.

Далее мы перебираем элементы, используя цикл for ...of. В цикле мы проверяем, является ли каждый из элементов файлом. Если элемент имеет король «файл», мы получаем его как файл и печатаем на консоли браузера.

Распечатка информации о файле на консоли не очень полезна для пользователей вашей веб-страницы. Давайте сделаем что-нибудь более интересное в следующем разделе.

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

Пользователю будет трудно узнать, что загрузка файла прошла успешно после вставки элементов в буфер обмена, если мы нигде не показываем это. Важно указать, что файл был успешно загружен, отобразив что-то, указывающее на успех. Какой лучший способ указать на успех загрузки, чем отображение самого загруженного файла?

В этом разделе мы расширим обработчик событий вставки, чтобы создать URL-адрес из полученного файла. Мы будем использовать созданный URL-адрес для визуализации файла после его загрузки в браузер. Мы воспользуемся API FileReader для создания URL-адреса из файла, как показано во фрагменте ниже.

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()


                const reader = new FileReader();

                reader.onloadend = (e) => {
                    const url = e.target.result
                    console.log(url)

                };
                reader.readAsDataURL(file);
            }
        }
    });

В приведенном выше фрагменте кода мы создали экземпляр FileReader и использовали его для генерации URL-адреса данных. Мы также добавили прослушиватель событий загрузки к объекту FileReader, где мы записываем результат чтения на консоль. Это первый шаг к предварительному просмотру файла. Теперь мы можем использовать URL-адрес для отображения файла.

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

 reader.onloadend = (e) => {
       const url = e.target.result
       const preview = document.querySelector('#preview')
       const img = document.createElement('img');

       img.src = url;
       preview.appendChild(img);
   };

В приведенном выше фрагменте кода мы получаем контейнер предварительного просмотра из DOM и создаем элемент img для рендеринга изображения. Мы назначаем созданный URL-адрес в качестве источника изображения и добавляем изображение в контейнер предварительного просмотра. Как только изображение будет добавлено в контейнер предварительного просмотра, пользователь сможет узнать, что вставленное им изображение было успешно загружено на веб-страницу.

Успех! Мы успешно реализовали загрузку файлов методом копирования на веб-страницу. Этот метод загрузки файлов дает пользователям возможность легко загружать файлы без необходимости нажимать несколько кнопок, чтобы выбрать файл для загрузки. Интерфейс ClipboadEvent предоставляет простой способ сбора данных из элементов, вставленных в браузер. Интерфейс FileReader позволяет нам создать URL-адрес из загруженного файла и использовать его для предварительного просмотра загруженного файла.

Не стесняйтесь сказать что-нибудь в разделе комментариев. Узнайте больше об интерфейсах ClipBoardEvent и FileReader на MDN.