Завантаження файлів у WordPress, переглянуто: частина 1 – сторона клієнта

Багато років тому я писав про те, як завантажувати файли в WordPress з адміністративної області. Ця публікація є фактично оновленою публікацією, але вона охоплює нові міркування, які я роблю, та деякі інші процеси, які, на мою думку, є необхідними.

Для цієї публікації я збираюся попрацювати над прикладом завантаження файлу PDF і того, як зробити його доступним у медіа-бібліотеці.

Роблячи це, я також планую розглянути деякі міркування, які слід враховувати на стороні клієнта та на стороні сервера, а також те, на що слід звернути увагу, коли хтось передає інформацію по дроту.

Завантаження файлів у WordPress (і медіатеки)

Перш ніж перейти до суті цієї публікації, я припускаю, що у вас є:

1. Сторінка підменю або налаштування сторінки адміністратора з введенням файлу,
2. Ви правильно налаштовані на прийом типів MIME,
3. Що вам зручно працювати з невеликим JavaScript,
4. І вам зручно працювати з власними повідомленнями за межами стандартного API WordPress.

Якщо так, то весь код має бути відносно зрозумілим (не тому, що я не буду розбирати його по частинах), але якщо будь-що з вищезазначеного звучить заплутаним, то допис може містити певний матеріал, який потребує трохи більше досліджень у Codex або щодо 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'],
    );
}

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

Але є ще щось

Спочатку це мала бути одна публікація, але кількість вмісту, щоб вимагати всього цього, займе надто багато часу, щоб просіяти (принаймні, на мій погляд). Тож я намагаюся трохи легше стежити за ним, розділивши його на пару дописів.

Як згадувалося раніше, на стороні клієнта ми можемо зробити дуже багато. Звичайно, є кроки, які weUplo може зробити, щоб покращити взаємодію з користувачем, але це не найбезпечніше, і на стороні сервера потрібно виконати більше роботи.

У другій половині цієї серії я розгляну PHP, необхідний для керування завантаженням файлів і безпечного виконання цього.