Загрузка нескольких файлов в Django — Multifile upload Django SWFUploader / Habr

Django предоставляет отличные средства для быстрого построения back-end без лишних телодвижений. Однако создание на его основе галлереи связано с множеством ручной работы по загрузке каждого файла в отдельности.

Решений у этой проблемы несколько:

загрузка архива и его распаковка на сервере,
использование специального поля,
имитация множественных post-запросов.

Я выбрал последний вариант, так как в этом случае нужно внести минимум изменений. Все операции выполняются на клиенте. Использовать для этого будем swfuploader.

Задумка проста, модифицируем с��андартный интерфейс добавления, так что бы перехватывать событие сохранения объекта. Заполненные поля будем использовать в качестве шаблона для создания множества объектов для выбранных файлов.

Итак выполним следующие действия.

Выкачиваем набор примеров swfupload: http://swfupload.googlecode.com/files/SWFUpload%20v2.2.0.1%20Samples.zip.
из него нам падобятся следующие файлы:
- swfupload/swfupload.js (js кусок ядра);
- swfupload/swfupload.swf (flash кусок ядра);
- swfupload/swfupload.queue.js (реализация очереди);
- formsdemo/XPButtonUploadText_61x22.png (замена кнопки).
Кладем их в медиа директорию djangosite/media/js/swfupload.
Прописываем js в djangosite/gallery/admin.py:

from django.contrib import admin from djangosite.gallery.models import Image class ImageAdmin(admin.ModelAdmin): class Media: js = ( '/media/js/jquery.min.js', '/media/js/swfupload/swfupload.js', '/media/js/swfupload/swfupload.queue.js', '/media/js/swfupload/swfupload.cookies.js', '/media/js/multiupload.js', ) admin.site.register(Image,ImageAdmin) * This source code was highlighted with Source Code Highlighter.
Создаем управляющий js-код djangosite/media/js/multiupload.js

jQuery().ready(function(e){ DjangoMultiUpload.init(); }); var DjangoMultiUpload = new function(){ // Общие переменные this.swfu = null; this.gui_submit = null; this.old_upload = null; this.busy = false; // Параметры для swfupload this.debug = false; this.flash_url = "/media/js/swfupload/swfupload.swf"; this.upload_url = ""; this.file_size_limit = "100 MB"; this.file_types = "*.jpg;*.gif;*.jpeg"; this.file_types_description = "Файлы изображений"; this.file_upload_limit = 100; this.file_queue_limit = 0; this.custom_settings = { progressTarget : "fsUploadProgress", cancelButtonId : "btnCancel" }; this.button_image_url = "/media/js/swfupload/XPButtonUploadText_61x22.png", this.button_width = "61", this.button_height = "22", this.button_placeholder_id = "spanButtonPlaceHolder", this.file_post_name = null; // Проверяем ос на Linux (проблемы совместимости). // Проверяем количество input file, // Должен быть один. // деолжен быть обязательным // Проверяем не редактирование ли это? // Готовим Ui. // Инициализируем swfupload this.init = function(e){ if (navigator.appVersion.indexOf("Linux")!=-1) return false; this.old_upload = jQuery('input[type=file]'); if (this.old_upload.size() != 1) return false; if (!jQuery("label[for=" + this.old_upload.attr('id') + "]").hasClass('required')) return false; if (this.old_upload.prev().get(0).tagName == "BR") return false; this.gui(); this.swfu = new SWFUpload(this); } // Скрываем оригинальный input file // Добавляем холдер для контрола swfuploader // Добавляем перехватчик отправки форм // Скрываем лишние кнопки this.gui = function(){ this.file_post_name = this.old_upload.attr('name'); jQuery("").insertAfter(this.old_upload); jQuery('form').submit(function(e){ DjangoMultiUpload.submit(e); return false; }); this.old_upload.hide(); jQuery('input[name=_continue]').hide(); jQuery('input[name=_addanother]').hide(); } // Проверка на занятость // Проверка обязательные поля // Запуск закачки this.submit = function(e){ if (this.busy){ alert('Uploading. Please wait.'); return false; } if (this.prepare_post_data()){ jQuery('input[name=_save]').attr('value',0); this.busy = true; this.swfu.startUpload(); } return false; } // Получаем все лейблы // По ним находим поля и прописываем их в postdata swfuploader // Если поле обязательное и не зполнено меняем цвет и возварщаем false // При переборе игнорируем input-file // На случай linux плеера передаем имя поля с файлом this.prepare_post_data = function (){ var labels = jQuery('label'); if (!labels.size()) return 0; var field = null; var label = null; var success = true; for (i = 0 ; i < labels.size();i++ ) { label = jQuery(labels.get(i)) if (label.attr('for') == this.old_upload.attr('id')) continue; field = jQuery('#' + label.attr('for')); if (label.hasClass('required') && !field.attr('value')){ label.css('color','red !important'); success = false; } this.swfu.addPostParam(field.attr('name'), field.attr('value')); } this.swfu.addPostParam('file_post_name', this.file_post_name) return success; } // По завершении загрузки файла this.upload_complete_handler = function(file) { jQuery('input[name=_save]').attr('value', parseInt(jQuery('input[type=submit]').attr('value'))+1) }; // По завершении загрузки всех файлов идем к списку объектов this.queue_complete_handler = function(numFilesUploaded) { this.busy = false; if (!this.settings.debug){ window.location="../"; } }; // Прочие события this.file_queued_handler = function(file){}; this.file_queue_error_handler = function(file, errorCode, message){}; this.file_dialog_complete_handler = function(numFilesSelected, numFilesQueued){}; this.upload_start_handler = function(file){}; this.upload_progress_handler = function(file, bytesLoaded, bytesTotal){}; this.upload_success_handler = function(file, serverData){}; this.upload_error_handler = function(file, errorCode, message){}; }; * This source code was highlighted with Source Code Highlighter.
у меня повсюду в админке используется jQuery. Если у вас его нет, так же кладем djangosite/media/js/jquery.min.js.
А теперь немного грязнохакерства. В djangosite/gallery/middleware.py прописываем:

from django.conf import settings class MultiUploadHacksMiddleware(object): def process_request(self, request): # Некоторые flash плееры не отправляют или отправляют неправильный sessionid # Берем его из POST if request.POST.has_key(settings.SESSION_COOKIE_NAME): request.COOKIES[settings.SESSION_COOKIE_NAME] = \ request.POST[settings.SESSION_COOKIE_NAME] # Другие не умеют менять название POST переменной с файлом # Возьмем его из заранее подготовленной if request.POST.has_key("file_post_name") and request.FILES.has_key("Filedata"): request.FILES[request.POST["file_post_name"]] = request.FILES["Filedata"] del request.FILES["Filedata"] * This source code was highlighted with Source Code Highlighter.
Добавляем наши хаки в settings.py

MIDDLEWARE_CLASSES = ( 'djangosite.gallery.middleware.MultiUploadHacksMiddleware', 'django.middleware.common.CommonMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', ) * This source code was highlighted with Source Code Highlighter.

Готово, теперь наши пользователи могут грузить фотки пачками. Можно пойти дальше — добавить прогресс бар и прочие навороты, но в моем случае в этом не было необходимости.

Ограничения:

у модели должно быть только одно поле — файл,
оно должно быть обязательным,
прочие поля (кроме id, разумеется) не должны быть уникальными,

В идеале хотелось что бы:

flash-плеер сразу брал правильные cookie (django все равно ругается но файлы создает),
linux flash-плеер поддерживал flie_post_name,
был метод openDialog() в swfupload для использования собственных контролов.

На всякий случай демка.