title: Dropzone Js csrftoken
body: <p>I have a django template with a form element that includes some input text edit and a submit button and a user avatar uplaoder with DropzoneJS.
  The problem is that I can't put <code>DropzonJs</code> in a div in my form Becuase it raise a <code>csrf_token error</code>. When I put an <code>csrf_token</code> in my <code>div</code> for <code>dropzoneJS;</code> nothing changes. What I have found yet us that <code>csrf_token</code> only works with <code>HTML</code> form element.
  Here is my template:</p>
  
  <pre><code>&lt;form role="form" method="POST"&gt;
      {% csrf_token %}
      &lt;h5&gt;Edit Profile Details&lt;/h5&gt;
      &lt;div class="content"&gt;
          &lt;h1&gt;{{ username }}&lt;/h1&gt;
          &lt;!-- My other fields here --&gt;
          &lt;div class="m-b-sm"&gt;
               &lt;img alt="image" class="img-circle" src="{% static 'img/profile.jpg' %}" /&gt;
          &lt;/div&gt;
          &lt;!-- Here is the div that contains DropzoneJS --&gt;
          &lt;div class="dropzone dropzone-previews" id="my-awesome-dropzone" action=""&gt;
              {% csrf_token %}
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- ... --&gt;
  </code></pre>
  
  <p>What I think yet was if I put a <code>{% csrf_token %}</code> in my form, there is no need to add some other <code>{% csrf_token %}</code> in its inner elements.</p>
  
  <p>DropzoneJS works with form like this:</p>
  
  <pre><code>&lt;form class="dropzone" action="{% url "test_avatar" %}" method="post" enctype="multipart/form-data" id="my-awesome-dropzone"&gt;
     {% csrf_token %}
  &lt;/form&gt;
  </code></pre>
  
  <p>But I can't use this form inside of my form Because of the error of nested <code>HTML</code> form elements.
  What should I do?</p>