Async upload php wordpress

WordPress. Загрузка медиа-файлов

Давайте создадим плагин, который позволит зарегистрированным пользователям загружать медиа файлы. Чтобы не создавать свой загрузчик файлов, будем использовать файл async-upload.php , расположенный в папке wp-admin . Это стандартный скрипт WordPress для AJAX-загрузки медиа файлов, в нем есть все необходимые проверки прав доступа, так что нам не придется делать это самостоятельно.

Для использования файла async-upload.php , нам нужно выполнить следующие условия:

• Установить значение атрибута name поля для загрузки файла в значение async-upload
• В post-запросе отправить ключ _wpnonce со значением, которе возвращает функция wp_create_nonce() с аргументом media-form
• В post-запросе отправить ключ action со значением upload-attachment , чтобы была вызвана функция wp_ajax_upload_attachment()

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

Плагин загрузки медиа-файлов

Итак, создаем директорию tokmakov-upload-media , а внутри нее — три файла: tokmakov-upload-media.php , script.js и style.js .

Файл tokmakov-upload-media.php

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

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

В результате работы шорткода на страницу будет добавлен html-код:

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

Источник

ez code

Просто о сложном.

Загрузка файлов с помощью AJAX для вашего WordPress плагина

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

Для того, чтобы не писать полностью собственный загрузчик файлов, мы будем использовать функционал WordPress, а именно файл async-upload.php, расположенный в папке wp-admin.

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

Требования

Чтобы использовать файл async-upload.php нужно следовать следующим правилам.

• Атрибут name поля для загрузки файла должен быть async-upload
• Защитный ключ, который мы отправляем в AJAX запросе, должен использовать стандартное имя _wpnonce, а значение его — результат работы функции wp_create_nonce(‘media-form’)
• В AJAX запросе мы должны отправить ключ action со значением upload-attachment, таким образом будет вызвана нужная нам функция wp_ajax_upload_attachment

Если мы будем следовать этим правилам, WordPress сможет корректно обработать наш AJAX запрос.

Плагин

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

Так как цель этой статьи — демонстрация загрузки файлов с помощью AJAX, функционал плагина будет довольно скромным, наш плагин будет:

• Позволять администратору вставлять форму загрузки в любую страницу, используя шорткод.
• Показывать зарегистрированным пользователям форму загрузки файла с помощью AJAX.
• Отправлять уведомление о загрузке администратору.

Что можно добавить в плагин:

• Хранить информацию о загрузках в базе данных.
• Показывать список файлов в интерфейсе админа.
• Позволять не зарегистрированным пользователям загружать.

Создаем плагин

Как обычно, для создания нового WordPress плагина — создайте папку в директории wp-content/plugins. Будем использовать имя my-upload-plugin и префикс mup_ для всех собственных функций.

Далее, создайте главный файл плагина с таким же именем, как у папки. Также создадим папку js, в которой будет храниться файл script.js.

Должна получиться следующая структура:

Напишем заголовок плагина в главном файле my-upload-plugin.php, осле этого можно перейти на страницу с плагинами и активировать его.

Подключение скрипта

Чтобы использовать script.js, необходимо подключить скрипт:

Нам нужно будет «локализовать» этот скрипт, так как в нем используются данные, которые могут меняться в зависимости от конкретной сессии. Для этого мы будем использовать функцию wp_localize_script(). Нам нужно изменить три переменные: ссылки на файлы admin-ajax.php и async-upload.php, а также защитный ключ, который генерирует функция wp_create_nonce().

Теперь код для подключения скрипта выглядит так:

Регистрируем шорткод для вывода формы

Для вывода формы загрузки файла мы будем использовать шорткод, таким образом мы сможем вставить форму где захотим и нам не придется каждый раз вставлять одну и ту же HTML разметку.

Нашей форме потребуется:

• Текстовое поле для ввода имени.
• Текстовое поля для ввода почты.
• Поле для файла с именем async-upload.
• Несколько div’ов для показа сообщений.

Также, если пользователь не авторизован, вместо формы для загрузки мы будем показывать форму для входа.

Этот код регистрирует новый шорткод image_form. Мы используем функции управления буфером вывода, и можем писать HTML код внутри PHP функции. С помощью атрибута accept мы разрешаем загружать только изображения. В функцию wp_login_url() мы передаем ссылку на текущую страницу (get_permalink()), таким образом пользователь будет перенаправлен обратно в случае успешного входа.

Разрешаем определенным ролям загружать файлы

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

Теперь, когда основа плагина готова, мы можем создать новую страницу и вывести на ней нашу форму.

Так форма будет выглядеть на сайте с темой twentysixteen:

Если мы не авторизованы, то мы увидим ссылку на страницу входа:

Загрузка файлов с помощью AJAX

Теперь можно заняться реализацией основной задачи плагина.

В файле script.js объявим нужные переменные:

Эти переменные пригодятся нам в дальнейшем.

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

Теперь отвлечемся немного от кода и попробуем загрузить файл. Используя инструменты разработчика (зависит от вашего браузера), проверим вывод в консоли. Успешный ответ от файла async-upload.php должен выглядеть примерно так:

Вы так же можете проверить существует ли файл в папке wp-content/uploads. Теперь, когда загрузка работает исправно, можно заняться улучшением нашего плагина:

• Покажем прогресс загрузки или уведомление во время загрузки файла.
• Покажем загруженное изображение в случае успеха или сообщение в случае ошибки.
• Добавим возможность загрузить новое изображение взамен старого.

Показываем сообщение в процессе загрузки

Чтобы показать сообщение о том, что файл загружается нам достаточно определить событие beforeSend в AJAX запросе:

Мы используем пустой div с классом image-notice для показа сообщения и прячем файловый инпут.

Мы также можем показать процент загрузки файла. Для этого надо переопределить стандартный jQuery объект xhr. Добавьте этот код в объявление $.ajax:

В браузерах, которые поддерживают эту функцию будет показан прогресс загрузки файла, а в тех, которые не поддерживают — ничего не произойдет.

Вывод изображения после успешной загрузки

В зависимости от ответа, который пришлет файл async-upload.php, мы показываем пользователю разные сообщения. Но если ключ success равен true, то мы можем показать загруженное изображение и спрятать поле выбора файла. Если произошла ошибка мы покажем сообщение об ошибке.

$imgId — скрытый инпут, в который записывается ID загруженного изображения, он пригодится нам дальше.

Заменяем старое изображение новым

Предоставим пользователю возможность заменить ранее загруженное изображение новым.

Для этого в случае успеха покажем немного другое сообщение:

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

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

Завершаем плагин

Для полноценной работы формы на нужно отслеживать событие submit и отправлять AJAX запрос:

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

Теперь откроем главный файл плагина и добавим обработчик для нашего AJAX запроса:

В нашем примере мы просто вышлем, уведомление администратору о новой загрузке.

Для отправки сообщения об успешной или не очень загрузке используются функции wp_send_json_error() и wp_send_json_success().

Для проверки работы плагина попробуйте загрузить файл и проверьте пришло ли вам уведомление на почту.

Источник

Включение загрузки файлов AJAX в ваш плагин WordPress

Предоставление функции загрузки в нашем плагине – дело непростое. Мы должны быть в состоянии обеспечить хороший пользовательский интерфейс (UX) для загрузки, а также следить за проблемами безопасности, которые сопровождают его. Если это не сделано должным образом, мы потенциально можем подвергнуть сайт риску возникновения любых уязвимостей безопасности.

Вместо того, чтобы создавать все решение с нуля, мы можем использовать основной код WordPress в наших интересах, чтобы ускорить разработку, особенно используя файл async-upload.php который находится в каталоге wp-admin .

Использование файла async-upload.php имеет несколько преимуществ. Во-первых, поскольку он используется ядром WordPress для асинхронной загрузки в медиатеку, мы можем быть уверены, что код соответствует стандарту. Кроме того, все проверки и проверки привилегий были выполнены, поэтому нам не нужно делать это самим.

Требования

Есть несколько правил, которые необходимо соблюдать, если мы хотим использовать этот скрипт. Вот разбивка на каждого из них.

• Используемый входной file должен иметь атрибут name, установленный на async-upload

Это связано с тем, что после проверки в файле async-upload.php , wp_ajax_upload_attachment который затем вызывает функцию media_handle_upload которая использует async-upload в качестве первых аргументов. Использование любого другого значения не будет работать.

• Одноразовый номер, который мы отправили вместе с запросом AJAX, должен использовать ключ _wpnonce по умолчанию со значением, сгенерированным из функции wp_create_nonce(‘media-form’)

Это связано с проверкой в ​​форме check_ajax_referer которая происходит внутри функции wp_ajax_upload_attachment .

• Данные, отправляемые с помощью запроса AJAX, также должны иметь ключ с именем action со значением upload-attachment

Это проверяется внутри файла async-upload.php который будет запускать функцию wp_ajax_upload_attachment только wp_ajax_upload_attachment когда значение установлено правильно.

О плагине

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

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

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

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

В рамках данного руководства плагин не будет:

• Храните любые материалы в базе данных.
• Просмотр представлений в бэкэнде.
• Разрешить анонимным пользователям загружать файлы.

Начальная загрузка плагина

wp-content/plugins папку wp-content/plugins и создайте новую папку, в которой будут находиться все наши коды плагинов. Я буду использовать имя sitepoint-upload для остальной части этого урока с префиксом su_ для всех функций и перехватывает обратные вызовы.

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

Вот обновленная структура каталогов для нашего плагина.

Давайте sitepoint-upload.php простой заголовок плагина в основной файл плагина sitepoint-upload.php , а затем перейдем на страницу плагинов, чтобы активировать его. Вот мой пример:

Поставьте в очередь сценарий

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

Мы также собираемся локализовать некоторые данные, которые будут использоваться внутри script.js используя функцию wp_localize_script . Нам нужны три вещи: правильный URL-адрес для admin-ajax.php поскольку мы собираемся отправить форму также через AJAX, а также URL-адрес для файла async-upload.php . Третий элемент, который нам нужно локализовать – это nonce, который будет сгенерирован с wp_create_nonce функции wp_create_nonce .

Обновленная функция обратного вызова для нашего хука wp_enqueue_scripts выглядит следующим образом:

Зарегистрируйте шорткод для формы отправки

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

• Текстовое поле для ввода имени пользователя
• Другое поле ввода адреса электронной почты для адреса электронной почты пользователя
• Ввод файла async-upload для загрузки AJAX
• Группа элементов-заполнителей, которые будут использоваться для предварительного просмотра электронной почты, сообщений об ошибках и других элементов.

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

Несколько объяснений о функции обратного вызова шорткода выше:

• Шорткод, который мы регистрируем, это image_form .
• Мы используем буферизацию вывода, чтобы мы могли быть более гибкими с тем, что мы выставляем внутри функции обратного вызова шорткода.
• Мы также ограничиваем выбор файлов для изображений только с помощью атрибута accept на входе файла. Обратите внимание, что это не заменяет фактическую проверку файла. (Больше информации)
• В качестве URL для входа мы предоставляем текущую постоянную ссылку на страницу в wp_login_url чтобы при успешном входе пользователь был перенаправлен обратно на нашу страницу wp_login_url .

Добавить возможность upload_files в роли определенного пользователя

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

Обратите внимание, что роль subscriber будет изменена только в том случае, если у нее все еще нет возможности upload_files .

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

Вот так выглядит форма в twentysixteen интерфейсе при установке WordPress по умолчанию с twentysixteen темой twentysixteen .

Если мы вышли из сайта, вместо этого будет показано уведомление.

Похоже, наш плагин прекрасно сработался!

Реализация загрузки AJAX

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

Давайте откроем наш файл script.js который находится внутри папки js чтобы продолжить. Сначала мы закроем весь код в выражении функции, вызываемой немедленно (IIFE) .

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

Кэшированные селекторы будут полезны нам в долгосрочной перспективе. Как упоминалось ранее, существует несколько правил, которые необходимо соблюдать, чтобы пройти проверку в файле async-upload.php . Для этого мы сделаем POST-запрос через AJAX в файл async-upload.php с правильными парами ключей или значений, как указано. Это можно сделать с помощью API FormData .

Сначала мы подключим событие change к входному файлу, и если изменение будет изменено, только тогда мы запустим загрузку AJAX.

А пока давайте оставим код, как указано выше, и протестируем функциональность загрузки, чтобы убедиться, что мы на правильном пути. Используя консоль разработчика (в зависимости от того, какой браузер используется), проверьте вкладку консоли для вывода. Пример ответа, предоставленного файлом async-upload.php при успешной загрузке, выглядит следующим образом:

Мы также можем проверить существование файла, перейдя непосредственно в каталог wp-content/uploads . Теперь, когда мы видим, что функция загрузки работает хорошо, давайте поработаем над некоторыми улучшениями в нашем сценарии загрузки. Вот некоторые улучшения, о которых я могу подумать:

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

Давайте посмотрим, как сделать это один за другим.

Показать индикатор выполнения или текст во время процесса загрузки

Это на самом деле простой. Нам нужно только определить обратный вызов для beforeSend jQuery AJAX. Где-нибудь в коде для загрузки AJAX поместите блок кода следующим образом:

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

Для поддерживаемых браузеров мы можем даже показать процент загрузки. Мы можем переопределить исходный объект jQuery xhr своим собственным. Добавьте это в конфигурацию $.ajax :

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

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

В зависимости от ответа, получаемого от скрипта async-upload.php , мы будем показывать пользователю другое сообщение. Если для ключа success установлено значение true , мы можем показать загруженное изображение пользователю и скрыть введенный файл. Если загрузка не удалась, мы заменим текст внутри div на image-notice ранее.

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

Предоставьте пользователю способ загрузить новое изображение, чтобы заменить текущее

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

Теперь, когда у нас есть якорь с классом btn-change-image , мы будем использовать его в наших интересах. Затем мы можем добавить прослушиватель события щелчка на этом якоре, когда он щелкает, он удаляет текущий предварительный просмотр изображения. Мы также будем скрывать уведомление, а также снова отображать ввод файла с его значением, которое было сброшено.

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

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

Завершение плагина

Мы собираемся обработать отправку формы через AJAX, поэтому мы привязываем слушателя события к событию submit этой формы.

Основываясь на приведенном выше коде, мы собираемся обработать отправку на сервер, используя встроенное действие WordPress AJAX . После успешной отправки, мы собираемся сбросить форму, удалить предварительный просмотр изображения, а также установить текст уведомления формы на зеленый.

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

Теперь снова откройте основной файл плагина, чтобы добавить обратный вызов AJAX. Поскольку мы устанавливаем значение action в image_submission , нам нужно добавить действительный обратный вызов в действие wp_ajax_image_submission .

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

Вот полный код для функции обратного вызова AJAX:

Для нашей цели достаточно простой проверки check_ajax_referer и встроенной PHP-функции filter_var для нашего filter_var использования. Мы также собираемся использовать функции wp_send_json_error и wp_send_json_success для отправки ответа.

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

Дальнейшие улучшения

Поскольку цель этого руководства – продемонстрировать, как выполнять загрузку AJAX через внутренний файл async-upload.php , мы определенно сокращаем ситуацию в нескольких местах. Вот несколько советов, которые могут улучшить наш простой плагин в целом.

• Добавление дополнительных полей в форму для сбора любых дополнительных значений для отправки.
• Поставьте отдельный CSS-файл в очередь, чтобы лучше оформить форму, заметить и загрузить информацию.
• Сохраните отправленные данные в базу данных, чтобы мы могли просмотреть их снова.
• Выполнение большей проверки процесса загрузки, чтобы сделать его более безопасным.

Полный исходный код плагина доступен на GitHub .

Источник