Django: Hochladen von Dateien mit AJAX: Formular sagt, dass das Dateieingabefeld leer ist (oder CSRF-Token fehlt oder falsch ist)

Ich versuche, meiner Django-App ein sehr einfaches modales Formular zum Hochladen von Dateien hinzuzufügen.

Aber wenn ich auf den Absenden-Button klicke, zeigt mir das Formular eine Fehlermeldung: "Dieses Feld ist erforderlich".

Alles wird richtig gerendert:

• Meine Hauptseite wird korrekt geladen
• Wenn ich auf die Schaltfläche "Agregar archivo adjunto" ("Anhang hinzufügen") klicke, wird das modale Formular korrekt angezeigt und alle Felder werden so gerendert, wie ich es möchte.
• Das Problem tritt auf, wenn ich in meinem Modalfeld auf die Schaltfläche "Addjuntar Archivo" ("Datei anhängen") klicke: Das Formular gibt einen Fehler aus, als ob ich versuchen würde, eine "null"-Datei hochzuladen!

Jetzt... Ich habe vergessen, cache: false, contentType: false, processData: falseden $.ajax()Anruf hinzuzufügen , aber wenn ich sie hinzufüge, erhalte ich die folgende Fehlermeldung: Forbidden (CSRF token missing or incorrect.). Also... ich weiß nicht, wie ich vorgehen soll!

Ich habe bereits (erfolgreich) ein modales Formular geschrieben, das mir hilft, Notizen (bezogen) zu meinem leadObjekt hinzuzufügen (unter Verwendung dieser Referenz), und ich versuche, genau den gleichen Prozess für einen modalen Dialog zum Hochladen von Dateien zu reproduzieren ... aber es geht nicht :(

Jede Hilfe wird wirklich geschätzt.

Übrigens: Ich teste dies mit Chrome (es wird kein IE verwendet!)

Hier ist mein Code:

modelle.py

def lead_dir_path(instance, filename):
    """
    Files will be saved to: MEDIA_ROOT/leads/<int:pk>/<filename>
    where <int:pk> is lead's primary key, and <filename> is just that.

    Filename will be set to an UUID value.
    """
    ext = filename.split('.')[-1]
    filename = '%s.%s' % (uuid.uuid4(), ext)
    return 'leads/%s/%s' % (instance.lead.pk, filename)


class ArchivosAdjuntosLead(models.Model):
    lead = models.ForeignKey(Lead, on_delete=models.CASCADE)
    descripcion = models.CharField(max_length=100)
    archivo = models.FileField(upload_to=lead_dir_path)

ansichten.py

def agregar_adjunto_json(request, pk):
    """
    Adds a file to lead with id=pk
    """
    context = {}
    data = {}

    lead = get_object_or_404(Lead, pk=pk)
    context['lead'] = lead

    if request.method == 'POST':
        form = AdjuntarArchivoLeadForm_v2(request.POST, request.FILES)
        if form.is_valid():
            form.save();
            data['form_is_valid'] = True
        else:
            data['form_is_valid'] = False
    else:
        form = AdjuntarArchivoLeadForm_v2()
        form.initial = {'lead': lead}
    context['form'] = form

    data['html_form'] = render_to_string(
        template_folder + 'partial_templates/partial_adjuntar_archivo.html',
        context,
        request = request,
    )
    return JsonResponse(data)

formen.py

class AdjuntarArchivoLeadForm_v2(forms.ModelForm):
    class Meta():
        model = ArchivosAdjuntosLead
        fields = ['lead', 'descripcion', 'archivo']

        widgets = {
          'lead': forms.TextInput(attrs={'class':'form-control', 'style':'display:none;'}),
          'descripcion': forms.TextInput(attrs={'class':'form-control'}),
          'archivo': forms.FileInput(attrs={'class':'form-control'}),
        }

partielle_attach_file.html

Ich verwende diese partielle Vorlage, um ein modales Formular zu erstellen:

<form method="POST" enctype="multipart/form-data"
      action="{% url 'leads:agregar_adjunto_v2' pk=lead.pk %}"
      id="js_adjuntar_archivo_form">
  {% csrf_token %}

  <div class="modal-header">
    <h4 class="modal-title">Adjuntar archivo</h4>
  </div>

  <div class="modal-body">

    {{ form.as_p }}

    <div class="modal-footer">
      <button type="submit" class="btn btn-primary col-4">Adjuntar archivo</button>
      <button type="button" class="btn btn-secondary col-4" data-dismiss="modal">Cancelar</button>
    </div>
  </div>
</form>

my_lead_page.html

Dies ist die Seite, auf der ich das modale Formular erstelle:

{% extends "leads/base.html" %}

{% load static %}

{% block contenido %}

<!-- Lots and lots of info -->
<button type="button" class="btn btn-sm btn-primary col-2" id="btn_agregar_adjunto">
  Agregar archivo adjunto
</button>
{% endblock %}

{% block other_scripts %}
<script type="text/javascript" src="{% static 'js/leads/archivos_adjuntos.js'%}"></script>

{% endblock %}

files_attachments.js

$(function() {
  $("#btn_agregar_adjunto").click(function() {
    $.ajax({
      url: 'adjuntar_archivo/',
      type: 'get',
      dataType: 'json',
      beforeSend: function() {
        $("#modal-form").modal("show");
      },
      success: function(data) {
        $("#modal-form .modal-content").html(data.html_form);
      }
    });
  });

  $("#modal-form").on("submit", "#js_adjuntar_archivo_form", function() {
    var form = $(this);
    $.ajax({
      url: form.attr("action"),
      data: form.serialize(),
      type: form.attr("method"),
      dataType: 'json',
      cache: false,
      contentType: false,
      processData: false, 
      success: function(data) {
        if(data.form_is_valid) {
          alert("Archivo adjuntado");
        } else {
          $("#modal-form .modal-content").html(data.html_form);
        }
      }
    });
    return false;
  });
  
});