Загрузка изображений с помощью HTMX в django

Я пытаюсь реализовать функцию добавления изображения через HTMX. Добавление фотографии происходит без проблем. Однако после добавления фотографии в представление ссылка на изображение не отображается. Кажется, что фотография не была добавлена, но когда я нажимаю кнопку обновления, ссылка отображается. Я пытаюсь добиться того, чтобы после загрузки фотографии и сохранения формы отображалась ссылка, подтверждающая, что фотография загружена.

Это мой шаблон формы

<form action='' method="POST" class="form" hx-post='' hx-swap='outerHTML' enctype="multipart/form-data"
    hx-post="{{request.path}}"
    hx-encoding="multipart/form-data">
    {% csrf_token %}
    
    {% for field in form %}
        <div class="form-group">
            {{field}}
        </div>
    {% endfor %}
    
    

    <div class='htmx-indicator'>Loading...</div>
    <div class="text-center">
        <button class='htmx-inverted-indicator' style='margin-top:10px;' type='submit' >Save</button>
      </div>
    
    {% if message %}
        <p>{{ message }}</p>
    {% endif %}
    
</form>

Затем я включаю этот шаблон в шаблон обновления.

Есть ли способ получить желаемый результат без использования JavaScript?

Если вы хотите заменить элемент (в вашем случае: форму), который отправляет запрос HTMX, вам все равно нужно добавить hx-target="this", где this - это специальная цель, которая указывает на саму себя (элемент с атрибутом hx-target="this"). После выполнения запроса HTMX поменяет старую форму на обновленную.

<form action='' 
      method="POST" 
      class="form" 
      enctype="multipart/form-data"
      hx-post="{{request.path}}"
      hx-target="this"
      hx-swap="outerHTML" 
      hx-encoding="multipart/form-data">

Редактирование:

После form.save() модель Workform получит загруженное изображение, но нам нужно вызвать обновление из БД через удаление image_field свойства из obj. После этого обращение к obj.image_field.url приведет к получению нового значения из базы данных.

if form.is_valid():
    form.save()
    del obj.image_field
    context['message'] = 'Updated!'

А в шаблоне: 

<form>
  ...
  {% if object.image_field.url %}
  <a href="{{ object.image_field.url }}">{{ object.image_field.url }}</a>
  {% endif %}
</form>

Вы можете добавить пустой HttpResponse с событием formSubmittedEvent

if form.is_valid():
    from django_htmx.http import trigger_client_event
    form.save()
    context['message'] = 'Updated!'
    response = HttpResponse()
    trigger_client_event(response, "formSubmittedEvent", { },)
    return response

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

<div  hx-get="{% url 'myapp:my-uploaded-image' %}"
    hx-trigger="formSubmittedEvent from:body" >
</div>


def my_image_url_view(request, any_args_needed):
    # your logic here, get obj...
    return render("myapp/snippets/image_template.html", {'obj': obj}

В myapp/snippets/image_template.html


<img src={{obj.image.url}} alt="No image">

Посмотрите больше здесь: https://github.com/ramiboutas/ramiboutas/blob/main/my_cheat_sheets/htmx/README.md#send-a-trigger-from-the-server-and-capture-it-from-the-client-later

Вернуться на верх