django-files-widget

Django AJAX form widgets and model fields for multiple files/images upload with progress bar

This is currently an alpha release. Not all functionality is there, only ImagesField have been implemented and there is not yet enough error handling.

Features

Drag & drop file uploading via AJAX
Plus 2 other ways to add files: upload button or by URL
Uploading multiple files at once
Upload progress bar
2 model fields with corresponding form fields and widgets: ImagesField and FilesField
Image gallery widget with drag & drop reordering
Integrates with Django Admin, Grappelli

Screenshots


File drag & drop to ImagesWidget in Django Admin	Ajax upload progress bar in ImagesWidget in Django Admin

Quick Start

Requirements

Django 1.5 or later
sorl-thumbnail
Pillow (or PIL)
jQuery 1.7 or later
jQuery UI (included)
jQuery File Upload (included)

Install

pip install git+git://github.com/lukaszbanasiak/django-files-widget.git

In `settings.py`

INSTALLED_APPS = (
    ...,
    'sorl.thumbnail',
    'topnotchdev.files_widget',
    ...,
)

MEDIA_URL = ...
MEDIA_ROOT = ...
THUMBNAIL_DEBUG = False

(Optional) basic settings with their defaults:

FILES_WIDGET_FILES_DIR           # 'uploads/files_widget/'
FILES_WIDGET_JQUERY_PATH         # (jQuery 1.9.1 from Google)
FILES_WIDGET_JQUERY_UI_PATH      # (jQuery UI 1.10.3 from Google)
FILES_WIDGET_IMAGE_MAX_SIZE      # None (pixel value - image will be cropped on the long side)
FILES_WIDGET_HASH_NAMES          # False, if True will return md5 of name truncated to the first 10 values

In `urls.py`

url(r'^files-widget/', include('topnotchdev.files_widget.urls')),

In `models.py`

from topnotchdev import files_widget

class MyModel(models.Model):
    images = files_widget.ImagesField()

Django Auth User Permissions (optional)

files_widget.can_upload_files

Template Usage Examples

No extra steps are required to use the widget in your Admin site. Here are some examples of displaying files and (thumbnail) images on your site:

A list of linked thumbnails:

{% for img in my_instance.images.all %}
    <a src="{{ img.url }}">
        {{ img.thumbnail_tag_100x100 }}
        <span class="caption">{{ img.filename }}</span>
    </a>
{% endfor %}

Only the next image:

{{ my_instance.images.next.img_tag }}

The filename without extension and underscores of the next 3 (or n) images:

{% for img in my_instance.images.next_3 %}
    {{ img.display_name }}
{% endfor %}

Or other attributes:

{{ my_instance.image.url }}
{{ my_instance.image.filename }}
{{ my_instance.image.local_path }} (just as an example)
{{ my_instance.image.exists }}
{{ my_instance.image.get_size }}
{{ my_instance.image.thumbnail_64x64.url }}
...

License

MIT

Credits

jQuery File Upload
Tutorial on jQuery Filedrop by Martin Angelov
Tutorial on Django AJAX file upload by Alex Kuhl
Answer on non-Model user permissions on Stackoverflow

API Documentation

(Under construction)

Navigation

lukaszbanasiak / django-files-widget Goto Github PK