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

В этой статье я покажу вам, как это реализовать.

Данный код представляет собой функцию JavaScript с именем inputButton(). Эта функция динамически создает элемент ввода файла и возвращает обещание, которое разрешается в массив файлов, выбранных пользователем.

Давайте внимательнее посмотрим на код:

function inputButton(){
    return new Promise((resolve, reject) => {
        const input = document.createElement('input');
        input.type='file'
        input.click()
        
        input.onchange = e =>{
          const selectedFiles = e.target.files;
          if (selectedFiles.length > 0) {
            resolve(selectedFiles);
          } else {
            reject('No files selected');
          }
        }
        // Handle errors or user cancellation of the file selection dialog
        input.onerror = () => {
          reject('An error occurred while selecting a file');
        };
        input.onabort = () => {
          reject('User cancelled file selection');
        };
    });
}

Функция inputButton() возвращает обещание, которое представляет собой способ обработки асинхронных операций в JavaScript. Когда обещание разрешено, оно возвращает массив файлов, выбранных пользователем. Параметр resolve, передаваемый конструктору промиса, является функцией обратного вызова, которая вызывается при разрешении промиса.

Внутри конструктора Promise новый элемент ввода создается с помощью метода document.createElement(). Затем для элемента ввода устанавливается тип file, что позволяет пользователю выбирать файлы со своего устройства.

После создания элемента ввода для него вызывается метод click() для программного запуска диалогового окна выбора файлов. Как только пользователь выбирает файлы и нажимает кнопку «Открыть», для элемента ввода запускается событие onchange. Прослушиватель событий onchange настроен на разрешение Promise с массивом файлов, выбранных пользователем.

Чтобы использовать эту функцию, просто вызовите ее и подождите, пока обещание разрешится. Вот пример того, как его использовать:

<div onClick={()=>inputButton().then(files => {
    console.log(files);
    // Do something with the selected files
})}>Click div to select files</div>

В этом примере мы прикрепляем функциональность inputButton к div, который затем ведет себя как обычный ввод, аналогичным образом вы можете прикрепить его к любому элементу HTML, чтобы он вел себя как ввод. Метод then() используется для обработки разрешенного промиса. Параметр files, передаваемый функции обратного вызова, содержит массив выбранных файлов. Затем вы можете выполнять любые необходимые операции с этими файлами, например загружать их на сервер или отображать на веб-странице.

Заключение

Функция inputButton() — это простая, но мощная утилита для создания диалогового окна ввода файла в JavaScript. Он позволяет легко включать выбор файлов в ваши веб-приложения, что делает его полезным инструментом для разработчиков.