Home

garmoncheg edited this page Jul 28, 2011 · 10 revisions
Clone this wiki locally

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, Firefox and Safari. Opera somehow fails to add multiple Photos.

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 %}

Also I've done a demo app repo here at my github. It's called django_multiuploader_usage_demo. For those who can not figure out this manual.) Also feel free to comment it on my blog or send me a e-mail with your troubles/suggestions and usage experience... https://github.com/garmoncheg/django_multiuploader_example_usage/

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.

Changes:

See CHANGELOG file for additional changes upon versions.