업로드 시 제목 생성¶

파일(문서)을 업로드할 때 Wagtail은 파일 이름에서 파일 확장자를 제거하고 제목 필드를 채웁니다. 이 섹션에서는 이 파일 이름을 제목으로 변환하는 방법을 사용자 정의하는 방법에 대해 설명합니다.

파일 이름을 제목으로 변환하는 기능은 단일 파일 위젯, 다중 업로드 위젯 및 선택기 모달 내에서 사용됩니다.

이미지에 대해서도 동일한 동작을 사용자 정의할 수 있습니다.

'wagtail:documents-upload' 이벤트를 수신하는 JavaScript 이벤트 리스너를 사용하여 이 제목의 확인된 값을 사용자 정의할 수 있습니다.

편집기에 JavaScript를 추가하는 가장 간단한 방법은 insert_global_admin_js hook을 사용하는 것입니다. 그러나 이벤트 리스너를 추가하는 모든 JavaScript가 작동합니다.

DOM 이벤트¶

수신할 이벤트 이름은 'wagtail:documents-upload' 입니다. 이 이벤트는 문서 업로드 form 에서 전달됩니다. 이벤트의 detail 속성에는 다음이 포함됩니다.

data - 사용할 title 을 포함하는 객체입니다. 확장자가 제거된 파일 이름입니다.
maxTitleLength - Document 모델 제목 필드의 최대 길이인 정수(또는 null)입니다.
filename - 확장자가 제거되지 않은 원본 파일 이름입니다.

생성된 Document 제목을 수정하려면 event.detail.data.title 에 접근하여 업데이트하면 되며, 반환 값은 필요하지 않습니다.

단일 문서 업로드의 경우, 사용자가 입력한 내용을 덮어쓰지 않도록 제목에 이미 값이 없는 경우에만 사용자 지정 이벤트가 실행됩니다.

event.preventDefault() 를 호출하여 기본 동작을 막을 수 있습니다. 단일 업로드 페이지나 모달의 경우, 제목에 어떤 값도 미리 채우지 않습니다. 다중 업로드의 경우, 제목 제출을 피하고 문서를 저장하는 데 제목이 필요하므로 파일 이름 제목(파일 확장자 포함)만 사용합니다.

이벤트는 ‘버블링’되므로 전역 document 리스너를 추가하여 이러한 모든 이벤트를 캡처하거나, 특정 시나리오에서만 제목을 조정하도록 필요에 따라 리스너 또는 핸들러 로직의 범위를 지정할 수 있습니다.

사용자 지정 JavaScript 이벤트에 대한 자세한 내용은 MDN을 참조하세요.

코드 예제¶

아래 각 예제에 대해 앱의 정적 디렉토리(예: static/js/)에 지정된 외부 JavaScript 파일을 만들고 wagtail_hooks.py 파일에서 참조하세요.

제목 시작 부분에 파일 확장자 추가하기¶

# wagtail_hooks.py
from django.templatetags.static import static
from django.utils.html import format_html

from wagtail import hooks

@hooks.register("insert_global_admin_js")
def get_global_admin_js():
    script_url = static('js/title_with_extension.js')
    return format_html('<script src="{}"></script>', script_url)

// title_with_extension.js
window.addEventListener('DOMContentLoaded', function () {
    document.addEventListener('wagtail:documents-upload', function (event) {
        const extension = (event.detail.filename.match(
            /\.([^.]*?)(?=\?|#|$)/,
        ) || [''])[1];
        const newTitle = `(${extension.toUpperCase()}) ${event.detail.data.title || ''}`;
        event.detail.data.title = newTitle;
    });
});

페이지 편집기에서만 생성된 제목을 변경하여 대시/밑줄 제거하기¶

대신 insert_editor_js hook을 사용하면 이 스크립트가 Document 가 아닌 페이지 편집기에서만 실행됩니다.

# wagtail_hooks.py
from django.templatetags.static import static
from django.utils.html import format_html

from wagtail import hooks

@hooks.register("insert_editor_js")
def get_editor_js():
    script_url = static('js/remove_dashes_underscores.js')
    return format_html('<script src="{}"></script>', script_url)

// remove_dashes_underscores.js
window.addEventListener('DOMContentLoaded', function () {
    document.addEventListener('wagtail:documents-upload', function (event) {
        // 대시/밑줄을 공백으로 바꿉니다
        const newTitle = (event.detail.data.title || '').replace(
            /(\s|_|-)/g,
            ' ',
        );
        event.detail.data.title = newTitle;
    });
});

파일 이름을 기반으로 한 제목 자동 채우기 중지¶

# wagtail_hooks.py
from django.templatetags.static import static
from django.utils.html import format_html

from wagtail import hooks

@hooks.register("insert_global_admin_js")
def insert_stop_prefill_js():
    script_url = static('js/stop_title_prefill.js')
    return format_html('<script src="{}"></script>', script_url)

다음 코드를 static/js/stop_title_prefill.js로 저장하세요

// stop_title_prefill.js
window.addEventListener('DOMContentLoaded', function () {
    document.addEventListener('wagtail:documents-upload', function (event) {
        // 단일 파일 업로드 시 제목 자동 채우기를 중지합니다
        // 다중 업로드 제목을 파일 이름(확장자 포함)으로 설정합니다
        event.preventDefault();
    });
});