Skip to content
garmoncheg edited this page Jul 22, 2011 · 10 revisions

Django Multiuploader Plugin

Readme for plugin of Django Multiuploader using jQuery Plugin by Sebastian Tschan(https://blueimp.net/).

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

Requirements:

- PIL(Python Imaging Library) (for sorl)
- sorl-thumbnail's(http://thumbnail.sorl.net/) (for thumbnails generation)
- Django 1.2.5 +

Tested:

Currently Tested full functionality under Chrome and Firefox. There are known issues under other browsers such as new Safari doesnt display thumbnails before image uploaded. And Opera somehow tries to download JSON upon adding photo.

Will try to fix them as soon as possible.

Example usage:

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

{% load multiuploader %}
{% multiupform %}

Installation:

1.Install an app. Do it by adding:

'multiuploader', 

string to your settings.py -> INSTALLED_APPS = () dictionary. Note that is has to have 'sorl.thumbnail', working already.

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

url(r'', include('multiuploader.urls')),

3.Copy or symlink files from plugins "media/" directory to your MEDIA_ROOT.

4.Edit templates and styles to meet your needs. (Optional) (for e.g. changing the form design and/or behavior)

Settings:

You can override plugin behavior by adding those settings to your root settings.py:

*File delete url to use in your app. default value is 'multi_delete'

 MULTI_FILE_DELETE_URL = 'multi_delete'

*Url to show uploaded image, default is 'multi_image' + key to identify image (about 80 characters long):

 MULTI_IMAGE_URL = 'multi_image'

*Folder to store uploaded pictures inside your MEDIA_ROOT folder

 MULTI_IMAGES_FOLDER = 'multiuploader_images'

Model Usage:

Plugin stores Uploaded images to a simple model. It has some those fields:

  • "MultiuploaderImage.filename" CharField to store original (uploaded) file filename
  • "MultiuploaderImage.file" FileField to store file link to uploaded file in file system
  • "MultiuploaderImage.key_data" CharField with randomly generated key to use in your model
  • "MultiuploaderImage.upload_date" DateTimeField to store file upload data with auto now adding

You can use it directly in your code like so:

#views.py
def multi_show_uploaded(request, key):
    image = get_object_or_404(MultiuploaderImage, key_data=key)
    url = settings.MEDIA_URL+image.image.name
    return render_to_response('multiuploader/one_image.html', {"multi_single_url":url,})

And then in template:

#'multiuploader/one_image.html'
<img src="{{ multi_single_url }}">

I will not stop on model usage here for long. Fell free to ask me any questions appeared...

Development plans:

  • Add a way to specify which model to use to store files.
Clone this wiki locally