title: How to include the CSRF token in the headers in Dropzone upload request?
body: <p>I am working on a single page application and I am using Laravel 5 for the web service.</p>
  
  <p>All forms are submitted asynchronously and I use a beforeSend on them to attach the CSRF token which I take from the meta tag like so:</p>
  
  <pre><code>$.ajax({
      url: '/whatever/route',
      type: 'POST',
      dataType: 'JSON',
      data: $('form#whatever-form').serialize(),
      beforeSend: function(request) {
          return request.setRequestHeader('X-CSRF-Token', $("meta[name='token']").attr('content'));
      },
      success: function(response){
          rivets.bind($('#whateverTag'), {whateverData: response});
      },
      error: function(response){
      }
  });
  </code></pre>
  
  <p>All my forms work fine but dropzone upload doesn't. It gives me back a <code>TokenMismatchException</code> exception. Here is my dropzone code to update the profile photo:</p>
  
  <pre><code>$("#mydropzone").dropzone({
      url: "/profile/update-photo",
      addRemoveLinks : true,
      maxFilesize: 5,
      dictDefaultMessage: '&lt;span class="text-center"&gt;&lt;span class="font-lg visible-xs-block visible-sm-block visible-lg-block"&gt;&lt;span class="font-lg"&gt;&lt;i class="fa fa-caret-right text-danger"&gt;&lt;/i&gt; Drop files &lt;span class="font-xs"&gt;to upload&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;nbsp&amp;nbsp&lt;h4 class="display-inline"&gt; (Or Click)&lt;/h4&gt;&lt;/span&gt;',
      dictResponseError: 'Error uploading file!'
  });
  </code></pre>
  
  <p>I have tried putting the <code>beforeSend</code> in here too:</p>
  
  <pre><code>$("#mydropzone").dropzone({
      url: "/profile/update-photo",
      addRemoveLinks : true,
      maxFilesize: 5,
      dictDefaultMessage: '&lt;span class="text-center"&gt;&lt;span class="font-lg visible-xs-block visible-sm-block visible-lg-block"&gt;&lt;span class="font-lg"&gt;&lt;i class="fa fa-caret-right text-danger"&gt;&lt;/i&gt; Drop files &lt;span class="font-xs"&gt;to upload&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;nbsp&amp;nbsp&lt;h4 class="display-inline"&gt; (Or Click)&lt;/h4&gt;&lt;/span&gt;',
      dictResponseError: 'Error uploading file!',
      beforeSend: function(request) {
          return request.setRequestHeader('X-CSRF-Token', $("meta[name='token']").attr('content'));
      },
  });
  </code></pre>
  
  <p>I have also tried to put a global ajaxSetup in my main file like so:</p>
  
  <pre><code>$.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="token"]').attr('content')
      }
  });
  </code></pre>
  
  <p>It is still not working. What am I doing wrong? How can I pass the CSRF token in the header with the dropzone upload so as to not a get an exception?</p>