Блог

У меня есть часть сайта, над которой я работаю, где пользователь может загрузить изображение. Я использую ModelForm для загрузки изображения, но мне нужно изменить саму форму, чтобы добавить стиль из CSS-фреймворка, который я использую (Bulma). Когда я отображаю форму из шаблона as {{ pic_form.as_p }} , она действительно ведет себя так, как я хочу: она показывает кнопку загрузки файла, и когда вы выбрали файл (перед нажатием кнопки отправки), он показывает имя этого файла, чтобы пользователь мог видеть, что изображение действительно выбрано.

Я несколько раз безуспешно пытался найти эту проблему в Интернете, и я попытался заглянуть в инспектор в браузере, чтобы увидеть html-код, который генерируется Django с использованием {{ pic_form.as_p }} опции, но это выглядит так же, как делать это таким образом.

Это код шаблона, который у меня есть для этой формы:

 <form method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="field">
        {{ pic_form.non_field_errors }}
        <label class="label" for="{{ pic_form.image.id_for_label }}">Upload an image</label>
        <div class="file has-name is-small">
            {{ pic_form.image.errors }}
            <label class="file-label">
                {{ pic_form.image }}
                <span class="file-cta">
                    <span class="file-icon">
                        {% fa5_icon 'upload' 'fas' %}
                    </span>
                    <span class="file-label">
                        Choose a file…
                    </span>
                </span>
                <span class="file-name">
                    {{ pic_form.image.name }}
                </span>
            </label>
        </div>
    </div>
    <div class="field">
        {{ pic_form.description.errors }}
        <label class="label" for="{{ pic_form.description.id_for_label }}">Description</label>
        {{ pic_form.description }}
    </div>
    <div class="field">
        <button class="button is-small is-outlined is-primary is-light" type="submit">Add picture</button>
    </div>
</form>                 
  

Мне нужно, чтобы имя файла отображалось в разделе span с классом file-name, но я не могу понять, как получить это имя. Код, который находится там прямо сейчас, просто дает мне «изображение», что имеет смысл, поскольку это буквальное имя поля.

Если у кого-нибудь есть идеи, как я могу отобразить имя файла до его фактического сохранения в базе данных, это было бы здорово, я действительно в недоумении. Спасибо за чтение.

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

 class PictureForm(forms.ModelForm):
    class Meta:
        model = Picture
        widgets = {
            'image': forms.ClearableFileInput(attrs={'class': 'file-input'}),
            'description': forms.TextInput(attrs={'class': 'input'})
        }
  

Вот как сейчас выглядит мой:
версия, созданная приведенным выше кодом

И это то {{ form.as_p }} , что я хотел бы повторить, только со стилем из Bulma: версия, созданная django при использовании их ярлыка формы

Вы можете добиться этого, добавив в свою Picture модель следующее:

 import os
....    
    def image_name(self):
        return os.path.basename(self.image.name)