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/dellax/django-files-widget

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_JQUERY_PATH         # (jQuery 2.2.4 from Google)
FILES_WIDGET_JQUERY_UI_PATH      # (jQuery UI 1.11.4 from Google)
FILES_WIDGET_IMAGE_QUALITY       # 50

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

Settings

• FILES_WIDGET_FILES_DIR
• FILES_WIDGET_JQUERY_PATH
• FILES_WIDGET_JQUERY_UI_PATH

Model Fields

• files_widget.FilesField()
• files_widget.ImagesField()

Model Field Options

• upload_to (only string values supported now)
• max_length

FilesField and ImagesField Instance Attributes

• splitlines()
• all()
• count()
• first()
• last()
• next()
• next_n()
• has_next()
• as_list() (not yet implemented)
• as_gallery() (not yet implemented)
• as_carousel() (not yet implemented)

FilesField, ImagesField Instance Attributes

• (unicode)
• settings
• escaped
• url
• local_path
• filename
• display_name
• ext
• img_tag()
• thumbnail()
• thumbnail_mxn()
• thumbnail_tag()
• thumbnail_tag_mxn()
• exists()
• get_size()
• get_accessed_time()
• get_created_time()
• get_modified_time()

Static Files Inclusion

• form.media
• files_widget/media.html (not yet implemented)
• Manual

Signal Handlers

• post_save