From 02bceca9b478358bdd569c16818d3be2467beb64 Mon Sep 17 00:00:00 2001
From: colymba <thierry@colymba.com>
Date: Tue, 20 Aug 2013 18:51:32 +0300
Subject: [PATCH] FIX UploadField validation error and styles

UploadField now return the validator's error message instead of 403. Plus nicer layout for error messages.
---
 css/UploadField.css                        |  7 ++++
 forms/UploadField.php                      |  1 -
 javascript/UploadField_downloadtemplate.js |  8 ++--
 scss/UploadField.scss                      | 46 ++++++++++++++++++++++
 4 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/css/UploadField.css b/css/UploadField.css
index a0ec3ed48..8d5ffcdd3 100644
--- a/css/UploadField.css
+++ b/css/UploadField.css
@@ -23,6 +23,13 @@ Used in side panels and action tabs
 .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-error-text { color: red; font-weight: bold; width: 150px; }
 .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #b7a403; }
 .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-success-text { color: #1f9433; }
+.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-preview { width: auto; height: auto; margin-right: 15px; }
+.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-info { margin-left: 0; }
+.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name { float: left; width: 70%; height: auto; }
+.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name .name { float: left; width: 100%; margin-bottom: 5px; }
+.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status { float: left; width: 100%; padding: 0; text-align: left; }
+.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-actions { float: right; width: 5%; min-height: 0; margin: 0; }
+.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-actions .ss-uploadfield-item-cancel { position: relative; top: auto; }
 .ss-uploadfield .ss-ui-button { display: block; float: left; margin: 0 10px 6px 0; }
 .ss-uploadfield .ss-ui-button.ss-uploadfield-fromcomputer { position: relative; overflow: hidden; }
 .ss-uploadfield .ss-uploadfield-files { margin: 0; padding: 0; overflow: auto; position: relative; }
diff --git a/forms/UploadField.php b/forms/UploadField.php
index 227b37f41..e889cf836 100644
--- a/forms/UploadField.php
+++ b/forms/UploadField.php
@@ -1235,7 +1235,6 @@ class UploadField extends FileField {
 		// Format response with json
 		$response = new SS_HTTPResponse(Convert::raw2json(array($return)));
 		$response->addHeader('Content-Type', 'text/plain');
-		if(!empty($return['error'])) $response->setStatusCode(403);
 		return $response;
 	}
 
diff --git a/javascript/UploadField_downloadtemplate.js b/javascript/UploadField_downloadtemplate.js
index 02500b389..43340b201 100644
--- a/javascript/UploadField_downloadtemplate.js
+++ b/javascript/UploadField_downloadtemplate.js
@@ -1,9 +1,11 @@
 window.tmpl.cache['ss-uploadfield-downloadtemplate'] = tmpl(
 	'{% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}' +
 		'<li class="ss-uploadfield-item template-download{% if (file.error) { %} ui-state-error{% } %}" data-fileid="{%=file.id%}">' + 
-			'<div class="ss-uploadfield-item-preview preview"><span>' +
-				'<img src="{%=file.thumbnail_url%}" alt="" />' +
-			'</span></div>' +
+			'{% if (file.thumbnail_url) { %}' +
+				'<div class="ss-uploadfield-item-preview preview"><span>' +
+					'<img src="{%=file.thumbnail_url%}" alt="" />' +
+				'</span></div>' +
+			'{% } %}' +
 			'<div class="ss-uploadfield-item-info">' +
 				'{% if (!file.error) { %}' +
 					'<input type="hidden" name="{%=file.fieldname%}[Files][]" value="{%=file.id%}" />' + 
diff --git a/scss/UploadField.scss b/scss/UploadField.scss
index a4aa878f2..61a4bccbb 100644
--- a/scss/UploadField.scss
+++ b/scss/UploadField.scss
@@ -85,6 +85,52 @@
 				}
 			}			
 		}
+
+		//Upload/Validation error
+		&.ui-state-error
+		{
+			.ss-uploadfield-item-preview {
+				width: auto;
+				height: auto;
+				margin-right: 15px;
+			}
+
+			.ss-uploadfield-item-info {
+				margin-left: 0;
+
+				.ss-uploadfield-item-name {
+					float: left;
+					width: 70%;
+					height: auto;
+
+					.name
+					{
+						float: left;
+						width: 100%;
+						margin-bottom: 5px;
+					}
+
+					.ss-uploadfield-item-status {
+						float: left;
+						width: 100%;
+						padding: 0;
+						text-align: left;
+					}
+				}
+
+				.ss-uploadfield-item-actions {
+					float: right;
+					width: 5%;
+					min-height: 0;
+					margin: 0;
+
+					.ss-uploadfield-item-cancel {
+						position: relative;
+						top: auto;
+					}			
+				}
+			}			
+		}
 	}
 	.ss-ui-button {
 		display: block;