Генерация заголовка при загрузке

При загрузке файла (документа) Wagtail берёт имя файла, удаляет расширение файла и заполняет поле заголовка. Этот раздел посвящён тому, как настроить преобразование имени файла в заголовок.

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

Вы также можете настроить это то же поведение для изображений.

Вы можете настроить разрешённое значение этого заголовка, используя JavaScript обработчик событий, который будет слушать событие 'wagtail:documents-upload'.

Самый простой способ добавить JavaScript в редактор — через insert_global_admin_js хук, однако любой JavaScript, добавляющий обработчик событий, будет работать.

Событие DOM

Имя события, на которое нужно слушать, — 'wagtail:documents-upload'. Оно будет отправлено при загрузке документа form. Атрибут detail события будет содержать:

• data — Объект, который включает title для использования. Это имя файла без расширения.
• maxTitleLength — Целое число (или null) — максимальная длина поля заголовка модели Document.
• filename — Исходное имя файла без удаленного расширения.

Чтобы изменить сгенерированный Document заголовок, обратитесь к и обновите event.detail.data.title, возвращаемое значение не нужно.

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

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

Событие «поднимется вверх», так что вы можете просто добавить глобальный document обработчик для захвата всех этих событий или ограничить свою логику обработчика событий, чтобы гарантировать, что вы корректируете заголовки только в определённых сценариях.

Дополнительную информацию об пользовательских событиях JavaScript см. на сайте MDN.

Примеры кода

Добавление расширения файла в начало заголовка

# wagtail_hooks.py
from django.utils.safestring import mark_safe

from wagtail.core import hooks


@hooks.register("insert_global_admin_js")
def get_global_admin_js():
    return mark_safe(
    """
    <script>
    window.addEventListener('DOMContentLoaded', function () {
        document.addEventListener('wagtail:documents-upload', function(event) {
            var extension = (event.detail.filename.match(/\.([^.]*?)(?=\?|#|$)/) || [''])[1];
            var newTitle = '(' + extension.toUpperCase() + ') ' + (event.detail.data.title || '');
            event.detail.data.title = newTitle;
        });
    });
    </script>
    """
    )

Изменение сгенерированных заголовков только в редакторе страницы для удаления тире/подчёркиваний

Используйте insert_editor_js хук вместо этого, чтобы этот скрипт не выполнялся на странице загрузки Document, а только в редакторах страниц.

# wagtail_hooks.py
from django.utils.safestring import mark_safe

from wagtail.core import hooks


@hooks.register("insert_editor_js")
def get_global_admin_js():
    return mark_safe(
    """
    <script>
    window.addEventListener('DOMContentLoaded', function () {
        document.addEventListener('wagtail:documents-upload', function(event) {
            // replace dashes/underscores with a space
            var newTitle = (event.detail.data.title || '').replace(/(\s|_|-)/g, " ");
            event.detail.data.title = newTitle;
        });
    });
    </script>
    """
    )

Остановка предварительного заполнения заголовка на основе имени файла

# wagtail_hooks.py
from django.utils.safestring import mark_safe

from wagtail.core import hooks


@hooks.register("insert_global_admin_js")
def get_global_admin_js():
    return mark_safe(
    """
    <script>
    window.addEventListener('DOMContentLoaded', function () {
        document.addEventListener('wagtail:documents-upload', function(event) {
            // will stop title pre-fill on single file uploads
            // will set the multiple upload title to the filename (with extension)
            event.preventDefault();
        });
    });
    </script>
    """
    )