File not in request.FILES but in request.POST I'm using htmx to make post request

Question

I have snippet of inputs that I render to the html page when a condition is met, everythings works appropriately except for the input with type file, I want to upload the files when a change has occured but the file object is not in request.FILES, it's in request.POST now I don't mind it being request.POST but the files is displayed as 'multiple': ['[object File]']

My partial template

<div class="my-2">
    <div id="uploaded"></div>
    <p class="lead">{{question.prompt}}</p>
    <input name="multiple" type="file" accept="image/*, .pdf" id="image_{{question.id}}"
        {% if question.required %}required{% endif %} {% if question.disabled %}disabled{% endif %} class="form-control"
        placeholder="{{question.placeholder}}" hx-post="{% url 'survey:file_multiple' %}" hx-trigger="change">
    <input type="hidden" name="filemultipleId"
        value="{% if question.form_input_type == 'file-multiple' %}{{question.id}}{% endif %}">
</div>

I am not rendering the form with django form as it will be difficult and near impossible to achieve the dynamicity I am looking for

request.POST QueryDict

<QueryDict: {'csrfmiddlewaretoken': ['TiLZFEWw88cqItD8MABv6lZKYDrNaVxGF4ZMDOV3sK43540z6uOcrx5uQO6iYldA', 'date': [''], 'dateId': ['20', '5'], 'multiple': ['[object File]'], 'filemultipleId': ['18'], 'fileId': ['17']}>

Traceback

Internal Server Error: /file-multiple/
Traceback (most recent call last):
  File "/home/tomms/.local/share/virtualenvs/web-app-QB9eq0sY/lib/python3.9/site-packages/django/utils/datastructures.py", line 83, in __getitem__
    list_ = super().__getitem__(key)
KeyError: 'multiple'

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/home/tomms/.local/share/virtualenvs/web-app-QB9eq0sY/lib/python3.9/site-packages/django/core/handlers/exception.py", line 47, in inner
    response = get_response(request)
  File "/home/tomms/.local/share/virtualenvs/web-app-QB9eq0sY/lib/python3.9/site-packages/django/core/handlers/base.py", line 181, in _get_response
    response = wrapped_callback(request, *callback_args, **callback_kwargs)
  File "/home/tomms/.local/share/virtualenvs/web-app-QB9eq0sY/lib/python3.9/site-packages/django/contrib/auth/decorators.py", line 21, in _wrapped_view
    return view_func(request, *args, **kwargs)
  File "/home/tomms/Work/web-app/survey/inputs.py", line 238, in file_multiple
    print(request.FILES['multiple'])
  File "/home/tomms/.local/share/virtualenvs/web-app-QB9eq0sY/lib/python3.9/site-packages/django/utils/datastructures.py", line 85, in __getitem__
    raise MultiValueDictKeyError(key)
django.utils.datastructures.MultiValueDictKeyError: 'multiple'

Answer 1

Did you add/set hx-encoding to multipart/form-data?

According to the docs https://htmx.org/docs/#files

If you wish to upload files via an htmx request, you can set the hx-encoding attribute to multipart/form-data. This will use a FormData object to submit the request, which will properly include the file in the request.