Настройте ClearableFileInput в шаблоне Django

Question

У меня есть форма с profile_picture=ImageField поле установлено в начальное значение. Он использует ClearableFileInput виджет. Мне нужно настроить форму в шаблоне, поэтому я не могу просто использовать {{ form.profile_picture}}, Как я могу разделить элементы поля и получить что-то похожее на это:

{{ with picture=form.profile_picture }}
{{ picture.label_tag }}
<a href="{{ picture.url }}">
  <img src="{{ picture.url }}">
</a>
{{ picture.clear-picture }}

где {{ picture.clear-picture }} должен сгенерировать флажок для удаления старой картинки

Answer 1

Ответ @vadimchin правильный, но он требует небольшой модификации для новых версий Django (начиная с 2.0), так как ClearableFileInputкласс изменился.

Вы должны переопределить template_nameатрибутClearableFileInput, создав другой шаблон в каталоге шаблонов. Например:

class CustomClearableFileInput(ClearableFileInput):
    template_name = 'widgets/customclearablefileinput.html'

И заполните customclearablefileinput.html требуемым кодом, изменив исходный код шаблона по мере необходимости.

Вы также должны внести изменения в ваш файл settings.py, поэтому Django позволяет переопределять шаблоны виджетов из каталога шаблонов ваших проектов: Добавить 'django.forms' в INSTALLED_APPSи затем добавьте этот код:

FORM_RENDERER = 'django.forms.renderers.TemplatesSetting'

Answer 2

Вы можете переопределить ClearableFileInput

class CustomClearableFileInput(ClearableFileInput):
    template_with_initial = (
        '%(initial_text)s: <a href="%(initial_url)s">%(initial)s</a> '
        '%(clear_template)s<br />%(input_text)s: %(input)s'
    )

    template_with_clear = '%(clear)s <label for="%(clear_checkbox_id)s">%(clear_checkbox_label)s</label>'

посмотри на render метод,

и после переопределения установите

  class ExForm(forms.Form):
       image = ImageField(widget=CustomClearableFileInput) 

Answer 3

Другое решение (на основе ответа @vadimchin) и более простое для меня - это переопределение параметра template_name в class ClearableFileInput.

Вам нужно только создать новый класс в forms.py

from django.forms.widgets import ClearableFileInput

class CustomClearableFileInput(ClearableFileInput):
  template_name = "your_path/custom_clearable_file_input.html"

field = forms.FileField(label = ... widget=CustomClearableFileInput(attrs={'placeholder': ...}))

А в custom_clearable_file_input.html вы можете поместить код django и настроить его по своему усмотрению.