miki725 edited this page Aug 7, 2011 · 7 revisions

Welcome to the Django-jQuery-File-Uploader-Integration-demo wiki! This demo implementation shows basic integration of jQuery Uploader with Django with CSRF protection enabled.


Starting with Django 1.2.5 (release notes), all requests to the server have to be CSRF (Cross-site request forgery) validated unless otherwise specified in the view (that can be done by either applying @csrf_exempt view decorator or disabling the CSRF altogether). And the only way to do that is by either sending a cookie with the CSRF token value, sending token value in the POST data, or by adding a special X-CSRFTOKEN header with the value of the token. When it comes to uploaders, even though some of them are excellent solutions such as very popular Uplodify, many of the them use Flash SWFObject to actually send data to the server. This usually works fine, until CSRF protection is introduced into the equation. The reason is because Flash cannot apply special headers to the requests, therefore failing Django's new CSRF protection.

jQuery Uploader on the other hand uses pure JS (Javascript). It sends file data using XHR (XMLHttpRequest) object, or for browsers which don't support this feature, it falls back to using iFrame. Some of the benefits of using JS is that it allows to add custom data to the request, and even allows to add special headers. That's why jQuery Uploader can play nice with Django >= 1.2.5.

Video Demonstration


jQuery Uploader Features

  • Pure Javascript so no ad-dons are necessary (e.g. Flash Player)
  • Easily customized (CSS)
  • Extensible (since jQuery)
  • Multiple file upload
  • Drag & Drop support
  • Upload progress bar
  • Supports majority of popular browsers (Firefox, Chrome, Safari, EI, etc)

Demo Implementation Features

  • Supports Django >= 1.2.5
  • Supports Django's CSRF
  • Ability to delete files after upload


Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.