Jul 18, 2011

Django: Beautiful multiple files Upload Plugin using jQuery UI.

After successful developing python back-end for Sebastian Tschan jQuey Plugin  I've decided to make a reusable app for that purpose. So:

This is a plugin, made using multiupload form from Sebastian Tschan.
It uses jQuey UI and jQuery instead of Flash uploader.
On Django side it uses sorl-thumbnails and PIL.
You can use it in your applications with simple inclusion tag

jQuery Features it has:
  • Multiple file upload:
    Allows to select multiple files at once and upload them simultaneously.
  • Drag & Drop support:
    Allows to upload files by dragging them from your desktop or filemanager and dropping them on your browser window.
  • Upload progress bar:
    Shows a progress bar indicating the upload progress for individual files and for all uploads combined.
  • Cancelable uploads:
    Individual file uploads can be canceled to stop the upload progress.
  • Resumable uploads:
    Aborted uploads can be resumed with browsers supporting the Blob API.
  • Chunked uploads:
    Large files can be uploaded in smaller chunks with browsers supporting the Blob API.
  • Preview images:
    A preview of image files can be displayed before uploading with browsers supporting the required HTML5 APIs.
  • No browser plugins (e.g. Adobe Flash) required:
    The implementation is based on open standards like HTML5 and JavaScript and requires no additional browser plugins.
  • Graceful fallback for legacy browsers:
    Uploads files via XMLHttpRequests if supported and uses iframes as fallback for legacy browsers.
  • Standard HTML file upload form:
    Shows a standard HTML file upload form if JavaScript is disabled.
  • Cross-site file uploads:
    Supports uploading files to a different domain with Cross-site XMLHttpRequests.
  • Multiple plugin instances:
    Allows to use multiple plugin instances on the same webpage.
  • Customizable and extensible:
    Provides an API to set individual options and define callBack methods for various upload events.
  • Multipart and file contents stream uploads:
    Files can be uploaded as standard "multipart/form-data" or file contents stream (HTTP PUT file upload).
  • Compatible with any server-side application platform:
    Works with Google App Engine (Python, Java), Ruby on Rails, PHP and any other platform that supports HTTP file uploads.
 Python Features:
  • Uses own model for temporary storing files:
    Uploaded files Model can be used anywhere in your code or transferred to another model of your choice.
  • Can be added using 2 simple templatetags:
    {% load multiuploader %} and {% multiupform %} in a form place.
  • Opensource!

Adding this AJAX form to your web site is as simple, as adding this 2 tags to your template:

    {% load multiuploader %}
    {% multiupform %}

It has it's own model for storing images there.
It has some bugs a bit but is quite usable. Feel free to use it in your projects.

Demo is available on Sebastian's website: http://aquantum-demo.appspot.com/file-upload
You can try it there but without python back-end.

I'm using it on my Photoblog: http://garmon.elutsk.net/

Finally you can download/fork it and view installation instructions on my GitHub repository dedicated for it: https://github.com/garmoncheg/django_multiuploader

UPD: I've done a demo app with usage of this plugin. Maybe it will be usefull to figure out some undescribed usage moments or so. https://github.com/garmoncheg/django_multiuploader_example_usage


  1. Hi I am very new to django and python I am try to implement django-multiuploder its very nice but I am not able to apply it on my web application .

    following Error :
    1. when I drag n drop the file and click on start upload I face an error that "SyntaxError: JSON.parse"

    2. When I click on add it open an browser wher i select the file and then click on upload button it open an popup for me to download the json file. and uploading keep working ..
    it successfully update the database but not on browser .

    Could you please help what I am doing wrong in it .

  2. 1. Could you be more specific please. Provide as much as you can. Best way to post your error to Dpaste website. (It's one click from your debug error page.)

    2 Could you provide screenshot of action you're doing?

    Prohably there are some errors with json parsing... But what caused them unknown for now...
    What version of django you're using? have you made syncdb? installed app properly?

  3. In your setup instructions what did you mean by this:

    2.Register urls in your root urlconf urls.py adding string to your urlpatterns like so :

    url(r'^$', 'app.views.image_view', name='main'),

    Thanks! And I am also getting json errors (same as other commenter)

  4. Ok... will try to fix them soon...
    Thanks for the info!

  5. please provide even some debug info on JSON errors you've got...

  6. This is all it spits out:

    Error: SyntaxError: JSON.parse

    Normally in PHP I would check the console for the Response it is receiving in my Firebug, but there is no POST data appearing there at all.

    I also thought it was strange that it tries to GET multi when the page loads? Maybe its some configuration problem on our/my end?

  7. Thanks! Finally spotted (semms to me) this error. Will try to fix it ASAP... I get this error only in Opera somehow...

  8. I've tried the same install on my Chromium browser and it is responding with a Internal Service Error.

    Any idea why Firefox would give the JSON error and Chromium the Server error?

  9. I don't get it at all for now... sorry(

  10. I figured it out. You were checking for MULTI_IMAGES_FOLDER and all of those variables in a way that Python didn't like so by setting them explicitly in my settings it works now... However, when I refresh the page I do not get all of the images that have been uploaded (they disappear) is this on purpose?

  11. Yeah! I've already changed it and made a commit. You may check github again... Thanks a lot!

  12. Any idea why this plugin will work in Chromium, but not Firefox? I'm still getting a JSON parsing error in Firefox 3.6, but it works fine in Chromium.

  13. I am getting JSON parse errors now only on multiple files being used would you know any settings that could lead to this?

  14. Could you provide some dumps or traces of errors you're getting?

  15. Hi Iurii,

    Is there a solution to use this in django-admin?

  16. Hmm... newer thought about using this plugin in admin... but... If yo'll make one please share :)

  17. Is their any other plugins to upload multiple files except Django?
    PHP Programmer

  18. Yes there are... Actually this plugin suits almost any platform.. PHP, Ruby etc...
    You just need to follow this UI developers website.

  19. I'm having troubles making it to work correctly. I'm using Chrome and it keeps looking for 'undefined' in my askbox app folder. Please check my pastebin link below. It has the necessary data. It seems like applications.js:22 is the culprit, but I'm not too sure. I'm using django 1.4, BTW.


  20. Hmm. Seems that you have missunderstood usage. {%multiupform%} is a tag with form itself... You are producing action to unexciting view with form POST.

    Please loojk at https://github.com/garmoncheg/django_multiuploader_example_usage

    1. Thank you very much! That fixed the problem. I'm still new to django. So I assume if I want to add more elements to the form, I have to modify the 'multiuploader_main.html' file, correct?

    2. yes... All this stuff is not a standalone app but a pattern that needs some polishing to work...

    3. Thank you for taking the time to answer our questions! :)

  21. This comment has been removed by the author.


    1. I think that it should. Everything is unicode here...


    1. Docs on Django at first. It uses only base concepts of it. If you don't understand what is written here you better not install it but look into Django's standard functionality. If does not solve your problem than maybe you're asking wrong question.
      You can post your question here.

      BUT NOTE. It is not an utility and you can not install it. It is a NON DISTRIBUTABLE Django app so you must install it manually. The process is described in Github's readme in wide manner. You must understand how models, templatetags and apps interact with each other. You can look into Github's 'example usage' mentioned in the article too.

  24. thanks!
    i am familiar with other platforms.
    i just need to add multi-image upload capabilities to sitу that has photo cataloges.
    and also the simple Cart system.
    i am not a programmer or admin. i am just a designer. thanks for your help

    1. well multiple upload handles Apache itself. Just you need JS that does this queue or post them inline.
      SO you need only to provide the view that will handle your image and provide miniature version...
      And the one that will actually store your image to where it must go...

      Look for example usage it should clear the case...

  25. THANKS.

    1. No it;s not possible because you have no 2 standard projects configurations. It all depends on minor concepts of your project's workflow.
      So there can not be any step by step here.

  26. i realize i did not ask you this...
    the registered user are able to upload multiple images. but it is the administrator in the back-end that can not. why is this? you know?

    1. Maybe you have some mess with the administrator rules set. Not sure. I do not think this behavior may be called with this app. Look into the administrator permissions/actions you trying to acomplish.

  27. in the control panel or inside django?


  29. you have any other suggestion for me? basically i am building a site for models and actors. such photos and profile data is involved. add-to-cart and image display and upload are features are needed.


  30. Hi Lurii.. You some kinda magician!!!
    Is there a way we can generate a temporary url for uploaded files, and share it with others?? If so kindly let this newbie know how..

    temporary url(in the sense that it stays alive only for a limited time)

    1. Well you will have to redefine your model... This plugin handles ONLY uploads.
      You will have to write your needs yourself upon using this piece of code... Maybe there are more specialized decisions but i'm in doubt about it.

  31. lurii,

    Thanks for a great app! I can't wait to start using it. I started by trying out the demo application, django_multiuploader_example_usage.

    I set DEBUG=True in settings.py so that the django development server would serve static files and ran ./manage.py syncdb and then runserver

    After than the site loads but looks different than intended. See http://www.cnl.salk.edu/~lee/tmp/multi.png.

    I seem to have no errors. See the console output below. I am able to upload a file, but I see no progress bar. The uploaded file does show up unless i reload the page. The console output below is from a page refresh after I've uploaded one image.

    I'm using Django 1.4. Any ideas? Again, thanks for making the available. It looks excellent.

    [18/Jun/2012 21:10:42] "GET / HTTP/1.1" 200 4996
    [18/Jun/2012 21:10:42] "GET /site_media/multiuploader/scripts/jquery.fileupload-ui.js HTTP/1.1" 304 0
    [18/Jun/2012 21:10:42] "GET /multi/ HTTP/1.1" 200 18
    [18/Jun/2012 21:10:42] "GET /site_media/cache/29/9f/299f46fc49f6d745ccbcb98b8a93a37a.jpg HTTP/1.1" 304 0
    [18/Jun/2012 21:10:42] "GET /site_media/cache/b4/9d/b49d2d61a8c625b7f93b841cd6bed870.jpg HTTP/1.1" 200 2803

    1. Well you need to make it load static CSS files. I do not see them in this list...

  32. Thanks for the quick answer. I'm not sure why the loading of CSS files didn't make into my post. Here is a full console output from a page load of http://localhost:8000, where you can see .css and .js files loading.

    If I understand the codes, no file that is being requested is not being served. 304 means that the local cached version is still good. Thanks for your help!

    [19/Jun/2012 12:31:28] "GET / HTTP/1.1" 200 4790
    [19/Jun/2012 12:31:29] "GET /site_media/multiuploader/styles/jquery.fileupload-ui.css HTTP/1.1" 304 0
    [19/Jun/2012 12:31:29] "GET /site_media/multiuploader/scripts/jquery.iframe-transport.js HTTP/1.1" 304 0
    [19/Jun/2012 12:31:29] "GET /site_media/multiuploader/scripts/jquery.fileupload-ui.js HTTP/1.1" 304 0
    [19/Jun/2012 12:31:29] "GET /site_media/multiuploader/scripts/jquery.fileupload.js HTTP/1.1" 304 0
    [19/Jun/2012 12:31:29] "GET /site_media/multiuploader/scripts/application.js HTTP/1.1" 304 0
    [19/Jun/2012 12:31:29] "GET /multi/ HTTP/1.1" 200 18

  33. And just in case it helps, the page source is posted here.


  34. This comment has been removed by the author.

  35. This comment has been removed by the author.

  36. Hi Iurii,

    It would be cool to merge photologue upload with multiuploader.


    1. Feel free to do it if you wish. I have no time for this right now unfortunately...

  37. Hey, could you please throw some pointers on how can i specify file types. I would like to use it to allow uploading only pdf, doc and plain text files.

    1. You can simply change acceptFileTypes regex in jquery.fileupload-ui.js

  38. Nice post
    i have a website http://www.cutumb.com/ for wallpapers
    i also want to use this script on http://www.cutumb.com/ for uploading wallpapers

  39. Hello !

    First thanks for you package.

    Secondly, I have a problem I just cannot resolve. I downloaded https://github.com/garmoncheg/django_multiuploader_example_usage/tree/master/django_multiuploader_example_usage/app and I tried to use it...
    The result is totally ugly and I'm pretty sure that there are no AJAX, js or anything. Here is the result: http://img248.imageshack.us/img248/5580/multiuploader.jpg

    I have no error :
    Quit the server with CONTROL-C.
    Validating models...

    0 errors found
    Django version 1.4.4, using settings 'prestationdb.settings'
    Development server is running at
    Quit the server with CONTROL-C.
    [21/Feb/2013 17:47:13] "GET /app/ HTTP/1.1" 200 5192
    [21/Feb/2013 17:47:13] "GET /static/multiuploader/css/jquery.fileupload-ui.css HTTP/1.1" 304 0
    [21/Feb/2013 17:47:13] "GET /static/multiuploader/js/jquery.fileupload.js HTTP/1.1" 304 0
    [21/Feb/2013 17:47:13] "GET /static/multiuploader/js/jquery.fileupload-fp.js HTTP/1.1" 304 0
    [21/Feb/2013 17:47:13] "GET /static/multiuploader/js/jquery.fileupload-ui.js HTTP/1.1" 304 0
    [21/Feb/2013 17:47:13] "GET /static/multiuploader/js/vendor/jquery.ui.widget.js HTTP/1.1" 304 0

    If you could help that would be wonderful :)

    Have a nice day !

  40. Hi,

    thanks for your great work. QUestion: how do I define a custom callback function for the 'done' event?

  41. Hello ! I also need to pass the variable to the category of membership of the uploaded photos . I tried to pass the variable through the url in different ways, but there's no way . How can I pass the id of the category? I modified the model in this way :
    class MultiuploaderImage ( models.Model ) :
        "" " Model for storing uploaded photos " ""
        filename = models.CharField ( max_length = 60 , blank = True , null = True)
        category = models.ForeignKey ( CategorieAlbums , blank = True , null = True)
        image = models.FileField ( upload_to = storage )
        description = models.TextField ( blank = True , null = True)
        key_data = models.CharField ( max_length = 90 , unique = True , blank = True , null = True)
        upload_date = models.DateTimeField ( auto_now_add = True)

    The id of the category I pass by:
    final image_view (request, id):
        MultiuploaderImage.objects.all items = ()
        categoriaalbum CategorieAlbums.objects.get = ( pk = id )
        category = CategorieAlbums.objects.get ( pk = id )
        return render_to_response ( ' images.html ', { ' items ' : items , ' categoriaalbum ' : categoriaalbum , ' category ' : category })

    But it is not considered.
    In the view I also tried to do :
            image = MultiuploaderImage ()
            image.filename = str ( filename)
            image.image = file
            id = image.categoria
    But the id is not taken .
    I do not know how to do , can you help ?
    Thanks and sorry for my poor english .