Проблема с CSRF-токеном при добавлении дропзоны к существующей форме в Django

Я работаю с Django формой, использующей dropzone для загрузки изображений. Но я не хочу добавлять dropzone ко всей форме, а только к ее div. Вот шаблон:

{% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% block content %}
<h6>UPLOAD MULTIPLE IMAGES NOW</h6>
<br>
<div class="formdiv" style="width:100%">
<form enctype="multipart/form-data" action="upload/" methd="POST">
    {% csrf_token %}
    <fieldset>
        <label for="yourname">Yourname
            <input type="text" value="name" />
        </label>
        <div class="dropzone dz" id="my-dropzone">
            <div class="dz-message" data-dz-message><span>{% trans "Drop here or click to upload" %}</span></div>
            <div class="fallback">
                <input name="file" type="file" multiple />
            </div>
        </div>
    </fieldset>
</form>
</div>
{% endblock %}

Проблема в том, что когда я пытаюсь загрузить любое изображение, я получаю сообщение об ошибке Forbidden со следующим текстом:

CSRF token missing or incorrect.

Обратите внимание, что если я уберу class="dropzone dz" id="my-dropzone" из div и вместо этого помещу его внутрь тега <form>, то все будет работать. Проблема началась именно тогда, когда я переместил dropzone в div, потому что не хотел, чтобы он применялся ко всей форме.

Вот мой код конфигурации дропзоны:

Dropzone.autoDiscover=false;
const myDropzone = new Dropzone('#my-dropzone',{
    url:'upload/',
    maxFiles:15,
    maxFilesize:5, // 5 mb max
    //parallelUploads:2,
    // if image is horizontal, then resize it if it's more than resizeWidth
    resizeWidth:1024,
    // if the image is vertical, then resize if it's more than resizeHeight
    resizeHeight:1024,
    // also they can be mime such as image/png
    acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg,.webp",
    // default is false and it allows to delete uploaded files
    addRemoveLinks: true,
    // this is the element where the remove button or text will be located
    dictRemoveFile: "<div><span class='fa fa-trash text-danger' style='font-size: 1.5em;cursor:pointer'></span></div>",
 
    /* the followint solution failed
    headers: {
        'X-CSRF-TOKEN': $('meta[name="token"]').attr('content')
    } */
});

Что я должен сделать, чтобы решить эту проблему?

Вернуться на верх