ClearableFileInput

Виджет ClearableFileInput применяется к полю FileField или ImageField в формах Django и предоставляет интерфейс для загрузки файлов с дополнительной опцией удаления уже загруженного файла. Виджет отображает текущее значение поля (ссылку на файл), а также чекбокс "Clear", позволяющий пользователю удалить существующий файл при отправке формы. Виджет автоматически генерирует HTML-разметку с полями для загрузки нового файла, ссылкой на текущий файл и флажком для его очистки.

Синтаксис

pythonfrom django import forms
from django.forms.widgets import ClearableFileInput

# Использование в классе формы
class MyForm(forms.Form):
  file_field = forms.FileField(
    label="Загрузите файл",
    widget=ClearableFileInput()
  )

# Использование с атрибутами
class MyFormWithAttrs(forms.Form):
  file_field = forms.FileField(
    label="Загрузите файл",
    widget=ClearableFileInput(attrs={
      'class': 'my-file-input',
      'accept': '.pdf,.doc,.docx'
    })
  )

Параметры

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

• attrs - словарь с HTML-атрибутами для поля ввода, например, 'class', 'accept', 'id'

Пример . С формой ModelForm

Рассмотрим пример использования виджета с моделью, содержащей поле для изображения:

pythonfrom django.db import models
from django import forms
from django.forms.widgets import ClearableFileInput

# Определяем модель
class Profile(models.Model):
  name = models.CharField(max_length=100)
  avatar = models.ImageField(upload_to='avatars/')
  created_at = models.DateTimeField(auto_now_add=True)

# Создаем форму на основе модели
class ProfileForm(forms.ModelForm):
  class Meta:
    model = Profile
    fields = ['name', 'avatar']
    widgets = {
      'avatar': ClearableFileInput(attrs={
        'class': 'avatar-upload',
        'accept': 'image/*'
      })
    }

Пример . Рендеринг виджета

При рендеринге виджет генерирует следующий HTML-код для существующего файла:

html<div>
  Сейчас: <a href="/media/avatars/user_avatar.jpg">user_avatar.jpg</a>
  <br>
  Изменить: <input type="file" name="avatar" accept="image/*" class="avatar-upload">
  <br>
  <label>
    <input type="checkbox" name="avatar-clear">
    Очистить
  </label>
</div>

Пример . Обработка данных формы

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

pythonfrom django.shortcuts import render
from .forms import ProfileForm
from .models import Profile

def edit_profile(request, profile_id):
  profile = Profile.objects.get(id=profile_id)
  if request.method == 'POST':
    form = ProfileForm(request.POST, request.FILES, instance=profile)
    if form.is_valid():
      # При очистке файла поле станет пустым
      form.save()
      return render(request, 'success.html', {'form': form})
  else:
    form = ProfileForm(instance=profile)
  return render(request, 'edit_profile.html', {'form': form})

Пример . Настройка пустого значения

Виджет позволяет настроить отображение, когда файл отсутствует, через атрибут initial_text:

pythonfrom django import forms
from django.forms.widgets import ClearableFileInput

class DocumentForm(forms.Form):
  document = forms.FileField(
    label="Документ",
    widget=ClearableFileInput(
      attrs={'class': 'document-upload'},
    )
  )

# Использование с начальным значением
form = DocumentForm(initial={
  'document': 'existing_document.pdf'
})

Смотрите также