在django中使用HTMX上传图像

Question

我试图通过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的情况下，是否仍然可以得到希望的结果？

编辑这是视图函数

@login_required
def workout_update_view(request, id=None):
    obj = get_object_or_404(Workout, id=id, pt=request.user.pt.id)
    form = WorkoutForm(request.POST or None, request.FILES or None, instance=obj) 
    new_exercise_url = reverse("train:hx-exercise-create", kwargs={"parent_id": obj.id})
    context = {
        "form": form,
        "object": obj,
        "new_exercise_url": new_exercise_url
    }
    if form.is_valid():
        form.save()
        context['message'] = 'Updated!'
    if request.htmx:
       return render(request, "train/komponents/forms.html", context)
    return render(request, "train/workout_update.html", context)  

Answer 1

如果您想替换提交HTMX请求的元素(在您的示例中是:表单)，则仍然需要添加hx-target="this"，其中指向自身的this is a special target (具有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模型将接收上传的映像，但我们需要通过deleting the image_field property of obj从DB中触发刷新。之后，访问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>

Answer 2

您可以使用事件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