(images_title_generation_on_upload)=

# 업로드 시 제목 생성

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

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

문서에 대해서도 [동일한 동작을 사용자 정의](../documents/title_generation_on_upload)할 수 있습니다.

`'wagtail:images-upload'` 이벤트를 수신하는 JavaScript [이벤트 리스너](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)를 사용하여 이 제목의 확인된 값을 사용자 정의할 수 있습니다.

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

## DOM 이벤트

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

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

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

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

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

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

[사용자 지정 JavaScript 이벤트](https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events)에 대한 자세한 내용은 MDN을 참조하세요.

## 코드 예제

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

### 제목에서 URL에 안전하지 않은 문자 제거

```python
# 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/wagtail_admin.js')
    return format_html('<script src="{}"></script>', script_url)
```

```javascript
// wagtail_admin.js
window.addEventListener('DOMContentLoaded', function () {
    document.addEventListener('wagtail:images-upload', function (event) {
        const newTitle = (event.detail.data.title || '').replace(
            /[^a-zA-Z0-9\s-]/g,
            '',
        );
        event.detail.data.title = newTitle;
    });
});
```

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

대신 [`insert_editor_js` hook](insert_editor_js)을 사용하면 이 스크립트가 `Image` 업로드 페이지가 아닌 페이지 편집기에서만 실행됩니다.

```python
# 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 insert_remove_dashes_underscores_js():
    script_url = static('js/remove_dashes_underscores.js')
    return format_html('<script src="{}"></script>', script_url)
```

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

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

```python
# 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_prefill.js')
    return format_html('<script src="{}"></script>', script_url)
```

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

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