Загрузка файлов в WordPress, новый взгляд: часть 1 — клиентская сторона

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

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

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

Загрузка файлов в WordPress (и в медиатеку)

Прежде чем перейти к сути этого поста, я предполагаю, что у вас есть:

1. Настройка страницы подменю или страницы администратора с вводом файла,
2. Что вы правильно настроены для приема типов MIME,
3. Что вам удобно немного JavaScript,
4. И вам удобно работать с пользовательскими сообщениями за пределами стандартного WordPress API.

Если это так, весь код должен быть относительно понятным (не то чтобы я не буду разбирать его по частям), но если что-то из вышеперечисленного звучит запутанно, пост может включать некоторый материал, который потребует немного времени. больше исследований в Кодексе или JavaScript, которые я предоставлю здесь.

В любом случае, я сделаю все, что в моих силах, максимально всеобъемлющим.

1 Основная идея

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

Сделать это несложно, но есть способы улучшить взаимодействие с пользователем, о которых я также хотел бы рассказать в этом посте (например, невозможность загружать что-либо, пока файл не будет указан в поле ввода, для пример).

2 Пользовательский интерфейс для проверки типа файла

Во-первых, как я сказал в начале поста, я предполагаю, что у вас есть основа для страницы администрирования в WordPress. Это можно сделать несколькими способами — я решил использовать страницу подменю, но есть и другие способы.

Во-вторых, страница проста: она включает заголовок страницы, поле ввода файла и кнопку «Загрузить», которая по умолчанию отключена:

Обратите внимание, что когда я пытаюсь добавить изображение, отличное от PDF, мне выдается сообщение об ошибке, а кнопка «Загрузить» по-прежнему неактивна:

Но когда я добавляю файл ожидаемого типа, кнопка «Загрузить» активируется:

Для этого требуется несколько вещей:

• JavaScript, который определяет тип файла,
• Частицы с видимостью, которые можно динамически переключать с помощью JavaScript,
• И возможность включить или отключить кнопку ввода файла.

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

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

3 Проверка типа файла на стороне клиента

Предположим для этого примера, что у нас есть партиал, который отображается всякий раз, когда мы пытаемся загрузить файл, который не является PDF. По умолчанию контейнер имеет style="display:none;" атрибут, которым мы вскоре будем манипулировать через JavaScript:

<?php
/**
 * Displays whenever a person tries to upload a file that isn't a PDF. This is toggled via JavaScript.
 */
?>

<div id="invalid-file-message" class="error notice is-dismissible" style="display:none;">
    <p>You have attempted to upload an invalid file type.</p>
    <button type="button" class="notice-dismiss">
        <span class="screen-reader-text">Dismiss this notice.</span>
    </button>
</div><!-- #invalid-file-message -->

Обратите внимание, что этот частичный файл имеет идентификатор invalid-file-message. Это немного обобщенно, так как вы можете захотеть поставить перед ним что-то еще, но для целей этого поста вы поняли идею.

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

4 Мониторинг элемента ввода файла

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

Взгляните на этот код:

Этот код будет искать значение поля ввода. Если тип файла не соответствует pdf, то он изменит видимость сообщения об ошибке выше; в противном случае будет отображаться кнопка загрузки.

И помните, рекомендуется ставить этот скрипт в очередь только в области администрирования и на странице, где это необходимо :

<?php

public function enqueue()
{
    if (!is_admin() 'acme-upload-pdf' !== get_current_screen()->id) {
        return;
    }

    wp_enqueue_script(
        'acme-upload-pdf-admin',
        $this->pluginUrl. 'assets/scripts/admin.js',
        ['jquery'],
    );
}

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

Но есть еще

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

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

Во второй половине этой серии я рассмотрю PHP, необходимый для управления загрузкой файлов и безопасным выполнением этого.