From 363703405abb89719d18b413085a53a310d56692 Mon Sep 17 00:00:00 2001
From: Dave Cranwell <david@torchbox.com>
Date: Thu, 17 Jul 2014 11:02:32 +0100
Subject: [PATCH] error forms returned from invalid image edit after upload,
 are now working

---
 .../wagtailadmin/scss/components/forms.scss   |  1 +
 .../static/wagtailimages/js/add-multiple.js   | 55 ++++++++++---------
 .../wagtailimages/scss/add-multiple.scss      |  1 +
 wagtail/wagtailimages/views/multiple.py       |  3 +-
 4 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
index 3501b8560..cd49b7ab6 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
@@ -734,6 +734,7 @@ ul.tagit li.tagit-choice-editable{
     padding:$mobile-nice-padding;
     background-color:$color-grey-5;
     margin-bottom:1em;
+    text-align:center;
 
     .drop-zone-help{
         border:0;
diff --git a/wagtail/wagtailimages/static/wagtailimages/js/add-multiple.js b/wagtail/wagtailimages/static/wagtailimages/js/add-multiple.js
index 50207caf6..2cb4f3f83 100644
--- a/wagtail/wagtailimages/static/wagtailimages/js/add-multiple.js
+++ b/wagtail/wagtailimages/static/wagtailimages/js/add-multiple.js
@@ -17,7 +17,7 @@ $(function(){
         add: function (e, data) {
             var $this = $(this);
             var that = $this.data('blueimp-fileupload') || $this.data('fileupload')
-            var li = $($('#upload-list-item').html()).addClass('uploading')
+            var li = $($('#upload-list-item').html()).addClass('upload-uploading')
             var options = that.options;
 
             $('#upload-list').append(li);
@@ -84,34 +84,39 @@ $(function(){
             var itemElement = $(data.context);
             itemElement.addClass('upload-success')
             $('.right', itemElement).append(data.result);
+            $('.tag_field input', itemElement).tagit(window.tagit_opts);
 
-            $('form', itemElement).each(function(){
-                var jform = $(this);
+            // ajax-enhance forms added on done() 
+            $('#upload-list').on('submit', 'form', function(e){
+                var form = $(this);
+                
+                e.preventDefault();
 
-                jform.submit(function(event) { //convert save to an ajax call
-                    event.preventDefault();
-                    $.post(this.action, $(this).serialize(), function(data) {
-                        var result = $.parseJSON(data);
-                        if (result.success) {
-                            itemElement.slideUp(function(){$(this).remove()});
-                        }
-                    });
+                $.post(this.action, form.serialize(), function(data) {
+                    if (data.success) {
+                        itemElement.slideUp(function(){$(this).remove()});
+                    }else{
+                        console.log(data);
+                        form.replaceWith(data.form);
+                        $('.tag_field input', form).tagit(window.tagit_opts);
+                    }
                 });
-
-                jform.find('.delete').each(function(){ //convert delete to an ajax call
-                    $(this).click(function(event) {
-                        event.preventDefault();
-                        $.post(this.href, jform.serialize(), function(data) {
-                            var result = $.parseJSON(data);
-                            if (result.success) {
-                                itemElement.slideUp(function(){$(this).remove()});
-                            }
-                        });
-                    });
-                });
-
-                jform.find('.tag_field input').tagit(window.tagit_opts);
             });
+
+            $('#upload-list').on('click', '.delete', function(e){
+                var form = $(this);
+
+                e.preventDefault();
+
+                $.post(this.href, form.serialize(), function(data) {
+                    if (data.success) {
+                        itemElement.slideUp(function(){$(this).remove()});
+                    }else{
+                    
+                    }
+                });
+            });
+
         },
       
         fail: function(e, data){
diff --git a/wagtail/wagtailimages/static/wagtailimages/scss/add-multiple.scss b/wagtail/wagtailimages/static/wagtailimages/scss/add-multiple.scss
index 7ea459510..36c88665b 100644
--- a/wagtail/wagtailimages/static/wagtailimages/scss/add-multiple.scss
+++ b/wagtail/wagtailimages/static/wagtailimages/scss/add-multiple.scss
@@ -6,6 +6,7 @@
     display:inline-block;
     position:relative;
     overflow:hidden;
+    padding-bottom:2px;
 
     input[type=file]{
         padding:0;
diff --git a/wagtail/wagtailimages/views/multiple.py b/wagtail/wagtailimages/views/multiple.py
index ae8fa520d..a05fb3bf6 100644
--- a/wagtail/wagtailimages/views/multiple.py
+++ b/wagtail/wagtailimages/views/multiple.py
@@ -6,6 +6,7 @@ from django.views.decorators.http import require_POST
 from django.core.exceptions import PermissionDenied
 from django.views.decorators.vary import vary_on_headers
 from django.http import HttpResponse, HttpResponseBadRequest
+from django.template import RequestContext
 from django.template.loader import render_to_string
 
 from wagtail.wagtailimages.models import get_image_model
@@ -70,7 +71,7 @@ def edit(request, image_id, callback=None):
             'form': render_to_string('wagtailimages/multiple/edit_form.html', {
                 'image': image,
                 'form': form,
-            }),
+            }, context_instance=RequestContext(request)),
         })