title: Forbidden error on jquery fileupload with django
body: <p>I'm using jquery fileupload with a django project. I want to add an additional field to my fileupload form . I followed <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data" rel="nofollow noreferrer">this</a> documentation. However, when I try to upload the images I get an <code>forbidden</code> error, django's console error is:</p>
  
  <pre><code>[14/Apr/2015 09:40:37]"POST /upload/ HTTP/1.1" 403 2274
  </code></pre>
  
  <p>My script is as follows:</p>
  
  <pre><code> $(document).ready(function() {
      $('form#fileupload').bind('fileuploadsubmit', function (e, data) {
         var name = $('form#{{ opts.model_name }}_form').find('input[name="name"]').val();
         $('form#fileupload').find('input[name="image_name"]').val( name );
         data.formData = { 'image_name': name };
         if (!data.formData.image_name) {
            data.context.find('button').prop('disabled', false);
            return false;
         }
       });
    });
  </code></pre>
  
  <p>My request is:</p>
  
  <pre><code>Remote Address:127.0.0.1:8000
  Request URL:http://localhost:8000/upload/
  Request Method:POST
  Status Code:403 FORBIDDEN
  Response Headers
  view source
  Content-Type:text/html
  Date:Tue, 14 Apr 2015 08:40:37 GMT
  Server:WSGIServer/0.1 Python/2.7.8
  X-Frame-Options:SAMEORIGIN
  Request Headers
  view source
  Accept:application/json, text/javascript, */*; q=0.01
  Accept-Encoding:gzip, deflate
  Accept-Language:en-US,en;q=0.8,es-419;q=0.6,es;q=0.4,pt;q=0.2,ko;q=0.2,gl;q=0.2
  Connection:keep-alive
  Content-Length:29144
  Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryURf6WD0fBem7roLF
  Cookie:PHPSESSID=fqdqkmd9cmb3oi2odcd6ogiru7; _osra_session=TUNTZWJaWmJXRitBeFJuV1JRQm9BSEVvUklia3RtN1ZOK3NzUVNqcEpYcmlCeVhDWHE4K0JmdjF1RlkzODVmLzg2cTUreE1oQnp6Z0JKU3d4aGtHYmkyS0MzQVRQc1VYMDQ5WWFGYk56RGQxNDQxcmV5S1pJd0VvS0Mxc2MzS1laMkwwZlI0NFBDcDdsRDZPMW1mT0JyRUNaSXMyODdZcklCVFNsaER0RmdUM0xzbFRJMk9RSkZvSFRXUXNCc3hvNy9wMDhGb0o4M3hZdW1iWFFZTGdXU3RNTHFGQnNaVkpGTkwrY2IzdWRZQWJLeWt1VGR3cy94ZnRWRGVOTldlakF2Zm1xUFZGSnRxSXpkUU4rNWVWbHc9PS0tZTh2c3U5cjZmN1p6eDB6ZFNuTFN6QT09--2880fbb1b8182485ef09f12b95fd3e7c6d71a714; sessionid=asmv53nr7qc4f1ra930ux7zp29k0vdks; csrftoken=cqqQDJsMROiJa5AtzxVJshOYK49Hl2WL
  Host:localhost:8000
  Origin:http://localhost:8000
  Referer:http://localhost:8000/admin/imageboard/image/add/
  User-Agent:Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36
  X-Requested-With:XMLHttpRequest
  Request Payload
  ------WebKitFormBoundaryURf6WD0fBem7roLF
  Content-Disposition: form-data; name="image_name"
  
  asd
  ------WebKitFormBoundaryURf6WD0fBem7roLF
  Content-Disposition: form-data; name="files[]"; filename="4f9.jpg"
  Content-Type: image/jpeg
  
  
  ------WebKitFormBoundaryURf6WD0fBem7roLF--
  </code></pre>
  
  <p><strong>asd</strong> is the name I tried to send.</p>
  
  <p>My example works if I don't add any additional data to my form.</p>
  
  <p>What may be the problem?</p>
  
  <p><strong>Edit -- Solved</strong></p>
  
  <p>I followed these two posts to solve my problem:</p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/19333098/403-forbidden-error-when-making-an-ajax-post-request-in-django-framework">403 Forbidden error when making an ajax Post request in Django framework</a></li>
  <li><a href="https://docs.djangoproject.com/en/1.8/ref/csrf/#ajax" rel="nofollow noreferrer">https://docs.djangoproject.com/en/1.8/ref/csrf/#ajax</a></li>
  </ol>
  
  <p>I used the <a href="http://plugins.jquery.com/cookie/" rel="nofollow noreferrer">jQuery Cookie</a> approach. I found it easier to implement ;). </p>
  
  <p>Then in my javascript I added:</p>
  
  <pre><code>var csrftoken = $.cookie('csrftoken');
  console.log(csrftoken);
  
  function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  }
  $.ajaxSetup({
     beforeSend: function(xhr, settings) {
     if (!csrfSafeMethod(settings.type) &amp;&amp; !this.crossDomain) {
       xhr.setRequestHeader("X-CSRFToken", csrftoken);
     }
  }
  </code></pre>