Простая drag-n-drop зона для отправки файлов с помощью FormIt

{'!AjaxForm' | snippet : [
                'snippet' => 'FormIt',
                'hooks' => 'checkAttachedFiles,email',
                'form' => 'form_with_file_tpl',
                'emailFrom' => 'email_from' | config,
                'emailFromName' => 'site_name' | config,
                'emailSubject' => 'Заявка с сайта ' ~ 'site_name' | config,
                'emailTo' => 'email_to' | config,
                'emailTpl' => 'modal_form_mail',
                'formFields' => 'phone,mail,file',
                'validate' => 'mail:email:required,phone:required:regexp=^/\+7 \(9\d{2}\) \d{3}-\d{2}-\d{2}/^',
                'successMessage' => 'Ваша заявка успешно отправлена!',
                'validationErrorMessage' => 'В форме содержатся ошибки!'
            ]}

<form action="" method="post" class="ajax_form form-with-files" enctype="multipart/form-data">

	<div class="form-group">
		<input 
			class="form-control" 
			type="tel" 
			name="phone" 
			placeholder="Ваш контактный телефон: *" 
			value="{$_modx->getPlaceholder('fi.phone')}" 
			id="af_phone" 
			autocomplete="off">
		<span class="error_phone">{$_modx->getPlaceholder('fi.error.phone')}</span>
	</div>
	
	<div class="form-group">
		<input 
			class="form-control" 
			type="email" 
			name="mail" 
			placeholder="Контактный Email: *" 
			value="{$_modx->getPlaceholder('fi.mail')}" 
			id="af_mail" 
			autocomplete="off">
		<span class="error_mail">{$_modx->getPlaceholder('fi.error.mail')}</span>
	</div>
	
	<div class="form-group">
	    <div class="drop-zone">
            <div class="drop-message">
                <p>Выберите файл или переместите его в поле
<span>Допускаются изображения или doc, docx, xls, xlsx, pdf, txt. Макс. 5 файлов до 10 Мб.</span></p>
                <img class="input__file-icon" src="assets/images/attach.svg" alt="Выбрать файл" width="32" height="32">
            </div>
            <input 
                class="drop-input form-control-file first" 
                name="file[]" 
                type="file" 
                class="input input__file" 
                autocomplete="off" 
                multiple>
	    </div>
	    <span class="error_file">{$_modx->getPlaceholder('fi.error.file')}</span>
        <ul class="added-files"></ul>
    </div>
	
	<button class="btn btn-purple" type="submit">Отправить</button>
</form>

.drop-zone {
    background-color: rgba(20, 20, 38, 0.94);
    position: relative;
}
.drop-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    max-height: 60px;
    cursor: pointer;
}
.drop-message {
    display: flex;
    column-gap: 30px;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    height: 60px;
    max-height: 60px;
    color: #fff;
}
.drop-message p {
    margin-bottom: 0;
}
.drop-message p span {
   font-size: 10px;
}
.added-files {
    font-size: 12px;
    width: 100%;
    margin-bottom: 0;
    margin-top: 10px;
}

$(function(){
    
    if (window.File && window.FileReader && window.FileList) {
        $('.form-with-files').each(function() {
            let form = $(this);

            form.find('.drop-zone').on('dragover', function(e) {
                $(this).css({
                    'border': '2px dashed #fff',
                    'background-color': 'rgba(73, 69, 117, 1)'
                });
            });
    
            // Обработка dragenter для всей страницы
            $(document).on('dragenter', function(e) {
                form.find('.drop-zone').css({
                    'border': '2px dashed #fff',
                    'background-color': 'rgba(73, 69, 117, 0.85)'
                });
            });
    
            let originalDropInput = form.find('.drop-input').first(); // Оригинальный input
            let dropInput = originalDropInput.clone().addClass('cloned').removeClass('first'); // Клон для использования
    
            // Функция для обработки выбора файлов
            function handleFileSelect(evt) {
                let files = evt.target.files;

                let currentFileCount = form.find('.file-name').length;
                let newFileCount = files.length;
    
                // Очищаем список файлов перед добавлением новых
                form.find('.added-files').empty();
    
                // Удаляем все клонированные .drop-input и возвращаем первый
                form.find('.drop-input.cloned').remove();
                form.find('.drop-input.first').css('display', 'block');
                
                if (currentFileCount + newFileCount > 5) {
                    Swal.fire({
                        position: "top-end",
                        icon: "error",
                        title: "Максимальное количество файлов — 5!",
                        showConfirmButton: false,
                        timer: 3000,
                        toast: true,
                        width: "19rem"
                    });
                    return; // Прекращаем выполнение функции
                }
    
                for (var i = 0, f; f = files[i]; i++) {
                    if (!f.type.match('image.*') && !/\.(doc|docx|xls|xlsx|pdf|txt)$/i.test(f.name)) {
                        Swal.fire({
                            position: "top-end",
                            icon: "error",
                            title: "Недопустимый тип файла!",
                            showConfirmButton: false,
                            timer: 3000,
                            toast: true,
                            width: "19rem"
                        });
    
                        continue;
                    }
                    
                    if (f.size > 10 * 1024 * 1024) {
                        Swal.fire({
                            position: "top-end",
                            icon: "error",
                            title: "Недопустимый размер файла!",
                            showConfirmButton: false,
                            timer: 3000,
                            toast: true,
                            width: "19rem"
                        });
    
                        continue;
                    }
    
                    const reader = new FileReader();
    
                    reader.onload = (function(theFile) {
                        return function(e) {
                            // Добавляем имя файла в список
                            $('<li class="file-name">' + theFile.name + '</li>').appendTo(form.find('.added-files'));
    
                            // Клонируем .drop-input и добавляем его в .drop-zone
                            let temp_input = dropInput.clone();
                            form.find('.drop-input').hide();
                            form.find('.drop-zone').append(temp_input);
                            form.find('.drop-zone').css('background-color', 'rgba(20, 20, 38, 0.94)');
                            temp_input.show();
                        };
                    })(f);
    
                    // Читаем файл как Data URL
                    reader.readAsDataURL(f);
                }
            }
    
            // Вешаем обработчик на .drop-input внутри текущей формы
            form.on('change', '.drop-input', handleFileSelect);
        });
    }

});

<?php
$maxFileSize = 10 * 1024 * 1024; // Максимальный размер файла 10 МБ
$maxFiles = 5; // Максимум 5 файлов

$allowedMimeTypes = [
    'image/jpeg', 'image/png', 'image/gif', 'image/webp', // изображения
    'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // .doc, .docx
    'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // .xls, .xlsx
    'application/pdf', 'text/plain' // .pdf, .txt
];

$allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'doc', 'docx', 'xls', 'xlsx', 'pdf', 'txt'];

// Если файлов нет — пропускаем проверку
if (empty($_FILES['file']['name'][0])) {
    return true;
}

// Проверка количества файлов
if (count($_FILES['file']['name']) > $maxFiles) {
    $hook->addError('file', "Можно загрузить не более $maxFiles файлов.");
    return false;
}

foreach ($_FILES['file']['name'] as $key => $fileName) {
    $fileTmpName = $_FILES['file']['tmp_name'][$key];
    $fileType = mime_content_type($fileTmpName);
    $fileSize = $_FILES['file']['size'][$key];
    $fileExt = strtolower(pathinfo($fileName, PATHINFO_EXTENSION));
    $fileError = $_FILES['file']['error'][$key];

    if ($fileError !== UPLOAD_ERR_OK) {
        $hook->addError('file', "Ошибка загрузки файла: $fileName.");
        return false;
    }

    if (!in_array($fileType, $allowedMimeTypes)) {
        $hook->addError('file', "Недопустимый тип файла: $fileName.");
        return false;
    }

    if (!in_array($fileExt, $allowedExtensions)) {
        $hook->addError('file', "Недопустимое расширение файла: $fileName.");
        return false;
    }

    if ($fileSize > $maxFileSize) {
        $hook->addError('file', "Файл $fileName превышает допустимый размер 10 МБ.");
        return false;
    }
}

return true;