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

54 comments:

  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 .

    ReplyDelete
  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?

    ReplyDelete
  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)

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

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

    ReplyDelete
  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?

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

    ReplyDelete
  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?

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

    ReplyDelete
  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?

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

    ReplyDelete
  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.

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

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

    ReplyDelete
  15. Hi Iurii,

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

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

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

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

    ReplyDelete
  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.

    http://pastebin.com/j02Qa40Y

    ReplyDelete
  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

    ReplyDelete
    Replies
    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?

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

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

      Delete
  21. This comment has been removed by the author.

    ReplyDelete
  22. THIS SUPPORTS RUSSIAN LANGUAGE? I AM NEW TO EVERYTHING

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

      Delete
  23. WHERE I CAN GET HELP TO INSTALL THIS UTILITY? :)

    ReplyDelete
    Replies
    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.

      Delete
  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

    ReplyDelete
    Replies
    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...

      Delete
  25. THANKS.
    POSSIBLE TO GIVE ME STEP BY STEP?
    SORRY FOR SUCH REQUEST.

    ReplyDelete
    Replies
    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.

      Delete
  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?

    ReplyDelete
    Replies
    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.

      Delete
  27. in the control panel or inside django?

    ReplyDelete
  28. THERE IS NO RIGHTS OPTIONS IN SITE ADMIN

    ReplyDelete
  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.

    thanks!

    ReplyDelete
  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)

    ReplyDelete
    Replies
    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.

      Delete
  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

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

      Delete
  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

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

    http://cnl.salk.edu/~lee/tmp/pageSource.txt

    ReplyDelete
  34. This comment has been removed by the author.

    ReplyDelete
  35. This comment has been removed by the author.

    ReplyDelete
  36. Hi Iurii,

    It would be cool to merge photologue upload with multiuploader.

    Thanks,
    Jordan

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

      Delete
  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.

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

      Delete
  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

    ReplyDelete
  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 http://130.79.101.76:8181/
    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 !

    ReplyDelete
  40. Hi,

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

    ReplyDelete
  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 .

    ReplyDelete