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

Questions

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

January 4, 2022

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'

>Solution :

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.