/django-files-widget

Django AJAX upload widget and model field for multiple files or images, featuring drag & drop uploading, upload progress bar, sortable image gallery

Primary LanguageJavaScriptOtherNOASSERTION

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 ImageField and ImagesField have been implemented and there is not yet enough error handling.

Features

  • Drag & drop file uploading via AJAX
  • Plus three other ways to add files: upload button, Django Filebrowser library, and by URL
  • Uploading multiple files at once
  • Upload progress bar
  • Four model fields with corresponding form fields and widgets: ImagesField, ImageField, FilesField, and FileField
  • Image gallery widget with drag & drop reordering
  • Documents gallery widget with file type icons with drag & drop reordering
  • Integrates with Django Admin, Grappelli, Django Filebrowser and Mezzanine

Screenshots

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

Quick Start

Requirements

Install

pip install git+git://github.com/TND/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_TEMP_DIR            # 'temp/files_widget/'
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_USE_FILEBROWSER     # False
FILES_WIDGET_FILEBROWSER_JS_PATH # 'filebrowser/js/AddFileBrowser.js'

In urls.py

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

In models.py

from topnotchdev import files_widget

class MyModel(models.Model):
    image = files_widget.ImageField()
    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

API Documentation

(Under construction)

Navigation

Settings

Model Fields

Model Field Options

FilesField and ImagesField Instance Attributes

FileField, FilesField, ImageField and ImagesField Instance Attributes

Django Auth Permissions

Static Files Inclusion

Signals

Signal Handlers

Management Commands