Search code examples
djangobootstrap-modal

Django bootstrap: File is not being sent with the Post when using a modal form

In my Django App there is a page where users can upload files from their local machine (and do other things).

The flow I built is so that users click on "+", a modal form comes up, users browse for a file on their local machine, select it and when they click save I submit the form.

However, for some reason, the file isn't getting posted but it seems like I am posting only the name of the file. But I can't figure out why.

enter image description here enter image description here

file page

...
<div class="list-files__btn-plus-wrp">
   <a class="list-files__btn-plus" href="#" data-bs-toggle="modal" data-bs-target="#modal">
    <img src="{% static 'action/img/project/files/icon_plus-file.svg' %}" alt="+">
  </a>
</div>
{% include 'action/forms/modals/modal.html' %}

modal.html


<div class="modal fade" tabindex="-1" role="dialog" id="modal" >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!-- Popup -->
            <div class="pop-up-form">
                <div class="pop-up-form__wrp">

                    <!-- Title -->
                    <div class="pop-up-form__title-wrp">
                        <h2 class="pop-up-form__title">Dialog Title</h2>
                    </div>
                    <!-- END Title -->

                    <!-- Form -->
                    <form action="{% url 'action:project_files' project_id=project.id %}" method="POST" class="pop-up-form__form">
                        {% csrf_token %}

                        <!-- Input File Name -->
                        <div class="pop-up-form__input-wrp">
                            <label class="pop-up-form__label" for="fileName">File Name</label>
                            <input class="pop-up-form__input" id="fileName" name="fileName" type="text" placeholder="File Name">
                        </div>
                        <!-- END Input File Name -->

                        <!-- Input Link -->
                        <div class="pop-up-form__input-wrp">

                            <!-- Link -->
                            <div class="pop-up-form__input-two-wrp">
                                <label class="pop-up-form__label" for="inputLink">Link</label>
                                <input class="pop-up-form__input" id="inputLink" name="inputLink" type="text" placeholder="https://">
                            </div>
                            <!-- END Link -->

                            <!-- Local File Name -->
                            <div class="pop-up-form__local-input-wrp">
                                <img src="{% static 'action/img/project/files/icon_paperclip-solid.svg' %}" alt="Added">
                                <input type="text" id="fileNameLocal" class="pop-up-form__filename-local" disabled>
                                <span id="deleteFile">
                                    <img src="{% static 'action/img/project/files/icon_close-inputfile.svg'%}" alt="Close">
                                </span>
                            </div>
                            <!-- END Local File Name -->

                        </div>
                        <!-- END Input Link -->

                        <!-- WRP Text & Upload -->
                        <div class="pop-up-form__input-wrp-all">
                            <p class="pop-up-form__input-text">OR</p>
                            <div class="pop-up-form__file-upload">
                                <label>
                                    <input type="file" name="userfile[]">
                                    <span>Browse</span>
                                </label>
                            </div>
                        </div>
                        <!-- END WRP Text & Upload -->



                        <!-- BTNs -->
                        <div class="pop-up-form__btn-wrp">
                            <button type="button" class="btn-transparent" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn-black">Save</button>
                        </div>
                        <!-- END BTNs -->


                    </form>
                    <!-- END Form -->

                </div>
            </div>
            <!-- END Popup -->
      </div>
    </div>
</div>

view

class ProjectFiles(MyLoginRequiredMixin, TemplateView):
    template_name = 'action/project/file.html'

   def post(self, request, *args, **kwargs):
        instance = get_object_or_404(JobProject, id=kwargs['project_id'])
        if request.POST.get('userfile[]'):
           
            file = request.FILES['userfile[]']
            #Actually, the whole request.FILES is empty
Solution

  • In your form, add the enctype to deal with files

    <form action="{% url 'action:project_files' project_id=project.id %}" method="POST" class="pop-up-form__form" enctype="multipart/form-data">
    {% csrf_token %}
   ....