Удалённая загрузка файлов в WPForms с помощью AJAX

Как работает загрузка файлов через AJAX в WPForms

Общая логика такая:

1. Пользователь выбирает файл в поле формы.
2. JavaScript ловит это событие и отправляет файл на сервер через AJAX.
3. На сервере PHP-обработчик принимает файл, сохраняет его и возвращает ответ с ссылкой или идентификатором.
4. JavaScript обновляет скрытое поле формы, чтобы при окончательной отправке формы можно было связать загруженный файл с записью.

Далее рассмотрим практическую реализацию.

Практическая реализация: пример кода

1. Добавляем поле для загрузки файлов в WPForms

Создайте форму в WPForms и добавьте в неё поле загрузки файлов с уникальным ID или CSS-классом, например ajax-file-upload. Также добавьте скрытое поле типа «Текст», куда будет записываться путь загруженного файла.

2. JavaScript для отправки файла AJAX-запросом

Добавьте в тему или плагин следующий скрипт, который будет отслеживать выбор файла и отправлять его:

jQuery(document).ready(function($) {
  $(document).on('change', '.ajax-file-upload input[type=file]', function() {
    var fileInput = this;
    var file = fileInput.files[0];
    if (!file) return;

    var formData = new FormData();
    formData.append('file', file);
    formData.append('action', 'wpformsru_ajax_file_upload');
    formData.append('nonce', wpformsru_ajax.nonce);

    var $form = $(fileInput).closest('form');
    var $hiddenField = $form.find('input[name="uploaded_file_path"]');

    $.ajax({
      url: wpformsru_ajax.ajax_url,
      type: 'POST',
      data: formData,
      contentType: false,
      processData: false,
      success: function(response) {
        if(response.success) {
          $hiddenField.val(response.data.file_url);
          alert('Файл успешно загружен');
        } else {
          alert('Ошибка загрузки файла: '+response.data.message);
          $hiddenField.val('');
          $(fileInput).val('');
        }
      },
      error: function() {
        alert('Ошибка AJAX запроса');
        $hiddenField.val('');
        $(fileInput).val('');
      }
    });
  });
});

3. PHP-обработчик загрузки файла

Добавьте в файл functions.php вашей темы или в отдельный плагин следующий код, который будет принимать файл и возвращать результат:

add_action('wp_ajax_wpformsru_ajax_file_upload', 'wpformsru_ajax_file_upload');
add_action('wp_ajax_nopriv_wpformsru_ajax_file_upload', 'wpformsru_ajax_file_upload');

function wpformsru_ajax_file_upload() {
  check_ajax_referer('wpformsru_nonce', 'nonce');

  if (empty($_FILES['file'])) {
    wp_send_json_error(['message' => 'Файл не загружен']);
  }

  $file = $_FILES['file'];

  $upload = wp_handle_upload($file, ['test_form' => false]);

  if (isset($upload['error'])) {
    wp_send_json_error(['message' => $upload['error']]);
  }

  wp_send_json_success(['file_url' => $upload['url']]);
}

4. Добавляем локализацию скрипта для AJAX

Чтобы скрипт знал URL AJAX и nonce для безопасности, добавьте в functions.php:

function wpformsru_enqueue_scripts() {
  wp_enqueue_script('wpformsru-ajax-upload', get_stylesheet_directory_uri() . '/js/wpformsru-ajax-upload.js', ['jquery'], null, true);
  wp_localize_script('wpformsru-ajax-upload', 'wpformsru_ajax', [
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce'    => wp_create_nonce('wpformsru_nonce'),
  ]);
}
add_action('wp_enqueue_scripts', 'wpformsru_enqueue_scripts');

Как связать загруженный файл с записью формы в WPForms

В скрытое поле формы uploaded_file_path записывается URL загруженного файла. После отправки формы это поле попадёт в метаданные записи WPForms.

Если нужно, можно добавить обработчик, который дополнительно сохранит файл в нужном месте или свяжет с кастомной логикой. Например:

add_action('wpforms_process_complete', 'wpformsru_save_uploaded_file_path', 10, 4);
function wpformsru_save_uploaded_file_path($fields, $entry, $form_data, $entry_id) {
  foreach ($fields as $field) {
    if ($field['name'] === 'uploaded_file_path' && !empty($field['value'])) {
      update_post_meta($entry_id, '_uploaded_file_url', sanitize_text_field($field['value']));
    }
  }
}

Полезные плагины для расширения работы с файлами в WPForms

Если не хочется писать собственный код, можно использовать готовые решения. Например:

• My Popup — для всплывающих загрузок и улучшенного UX;
• Clearfy Pro — оптимизация и улучшение безопасности загрузок;
• WPForms Addons с поддержкой интеграции с облачными хранилищами, если нужны дополнительные варианты хранения файлов.

Особенности и ограничения

При реализации удалённой загрузки учтите:

• Нужно обязательно проверять тип и размер файлов на сервере для безопасности.
• Обработка ошибок должна быть дружелюбной: оповещайте пользователя о причинах отказа загрузки.
• Учтите, что загруженные файлы занимают место на сервере, и нужно предусмотреть очистку или управление ими.
• Для больших файлов стоит рассмотреть настройку PHP и сервера (max_upload_size, max_post_size, max_execution_time).

Итоги

Удалённая загрузка файлов в WPForms через AJAX — это практичное решение для улучшения UX и производительности форм. Такой функционал легко добавить с минимальным кодом и базовыми знаниями PHP и JavaScript. Используя приведённый пример, вы сможете быстро адаптировать ваши формы под современные требования и повысить удобство пользователей.