Upload form acts with more grace

public_html/media/css/core.css

@@ -93,3 +93,8 @@ nav li.search input {
 #inner-content {
 	overflow: hidden;
 }
+
+p:first-child,
+h1:first-child {
+	margin-top: 0;
+}

public_html/media/css/upload.css

@@ -40,10 +40,17 @@
 	margin-right: 1em;
 }
 
+.post .alert,
+#upload-step2,
+#upload-no-posts,
 #post-template {
 	display: none;
 }
 
+.inactive {
+	opacity: .5;
+}
+
 .post {
 	margin-bottom: 4em;
 }

public_html/media/js/core.js

@@ -0,0 +1,18 @@
+if ($.when.all === undefined)
+{
+	$.when.all = function(deferreds)
+	{
+		var deferred = new $.Deferred();
+		$.when.apply($, deferreds).then(function()
+		{
+			console.log(arguments);
+			deferred.resolve(Array.prototype.slice.call(arguments, 0));
+		}, function()
+		{
+			console.log(arguments);
+			deferred.fail(Array.prototype.slice.call(arguments, 0));
+		});
+
+		return deferred;
+	}
+}

public_html/media/js/upload.js

@@ -3,8 +3,6 @@ $(function()
 	var handler = $('#file-handler');
 	var tags = []; //todo: retrieve tags
 
-	$('#upload-step2').hide();
-
 	handler.on('dragenter', function(e)
 	{
 		$(this).addClass('active');
@@ -43,24 +41,33 @@ $(function()
 		{
 			$(this).remove();
 		});
+		if ($('#upload-step2 .post').length == 1)
+		{
+			$('#upload-step2').slideUp();
+			$('#upload-no-posts').slideDown();
+		}
 	});
 
 
-	$('#upload-step2 form').submit(function(e)
+	$('#the-submit').click(function(e)
 	{
-		var url = $(this).attr('action') + '?json';
 		e.preventDefault();
-		var posts = $('.post', $(this));
+		var theSubmit = $(this);
+		theSubmit.addClass('inactive');
+		var posts = $('#upload-step2 .post');
 
 		if (posts.length == 0)
 		{
+			//shouldn't happen
 			alert('No posts to upload!');
 			return;
 		}
 
+		var ajaxCalls = [];
 		posts.each(function()
 		{
 			var postDom = $(this);
+			var url = postDom.find('form').attr('action') + '?json';
 			var file = postDom.data('file');
 			var tags = postDom.find('[name=tags]').val();
 			var safety = postDom.find('[name=safety]:checked').val();
@@ -69,29 +76,61 @@ $(function()
 			fd.append('tags', tags);
 			fd.append('safety', safety);
 
-			var ajax =
+			postDom.find(':input').attr('readonly', true);
+			postDom.addClass('inactive');
+
+			var ajaxData =
 			{
 				url: url,
 				data: fd,
 				processData: false,
 				contentType: false,
 				type: 'POST',
-				success: function(data)
+				context: postDom
-				{
-					//todo: do this nice
-					if (data['success'])
-					{
-						postDom.slideUp();
-						//alert(file.name + ': success!');
-					}
-					else
-					{
-						alert(data['errorMessage']);
-					}
-				}
 			};
 
-			$.ajax(ajax);
+			var defer = $.ajax(ajaxData)
+				.then(function(data)
+				{
+					data.postDom = $(this);
+					return data;
+				}).promise();
+
+			ajaxCalls.push(defer);
+		});
+
+
+		$.when.all(ajaxCalls).then(function(allData)
+		{
+			var errors = false;
+			for (var i in allData)
+			{
+				var data = allData[i];
+				var postDom = data.postDom;
+				if (data['success'])
+				{
+					postDom.slideUp(function()
+					{
+						$(this).remove();
+					});
+				}
+				else
+				{
+					postDom.removeClass('inactive');
+					postDom.find(':input').attr('readonly', false);
+					postDom.find('.alert').text(data['errorMessage']).slideDown();
+					errors = true;
+				}
+			}
+
+			if (errors)
+			{
+				theSubmit.removeClass('inactive');
+			}
+			else
+			{
+				window.location.href = $('#upload-step2').attr('data-redirect-url');
+			}
 		});
 	});
 
@@ -103,6 +142,7 @@ $(function()
 			{
 				var file = files[i];
 				var postDom = $('#post-template').clone(true);
+				postDom.find('form').submit(false);
 				postDom.removeAttr('id');
 				postDom.data('file', file);
 				$('.file-name strong', postDom).text(file.name);

src/Bootstrap.php

@@ -29,7 +29,7 @@ class Bootstrap
 
 		$this->context->title = $this->config->main->title;
 		$this->context->stylesheets = ['core.css'];
-		$this->context->scripts = [];
+		$this->context->scripts = ['core.js'];
 
 		$this->context->layoutName = isset($_GET['json'])
 			? 'layout-json'

src/Controllers/PostController.php

@@ -83,6 +83,8 @@ class PostController
 			foreach ($suppliedTags as $tag)
 				if (!preg_match('/^[a-zA-Z0-9_-]+$/i', $tag))
 					throw new SimpleException('Invalid tag "' . $tag . '"');
+			if (empty($suppliedTags))
+				throw new SimpleException('No tags set');
 
 			$suppliedFile = $_FILES['file'];
 

src/Views/post-upload.phtml

@@ -25,42 +25,49 @@
 			<div class="clear"></div>
 		</div>
 
-		<div id="upload-step2">
+		<div id="upload-step2" data-redirect-url="<?php echo \Chibi\UrlHelper::route('post', 'list') ?>">
-			<form action="<?php echo \Chibi\UrlHelper::route('post', 'upload') ?>" method="post">
+			<div class="posts">
-				<div class="posts">
+			</div>
-				</div>
 
-				<div class="submit-wrapper">
+			<div class="submit-wrapper">
-					<input type="submit" value="Submit" class="submit btn"/>
+				<input id="the-submit" type="submit" value="Submit" class="submit btn"/>
-				</div>
+			</div>
-			</form>
 		</div>
 
 		<div id="post-template" class="post">
-			<a class="remove-trigger">
+			<form action="<?php echo \Chibi\UrlHelper::route('post', 'upload') ?>" method="post">
-				remove <span>&times;</span>
+				<p class="alert alert-error">Some kind of error</p>
-			</a>
 
-			<img class="thumbnail" src="<?php echo \Chibi\UrlHelper::absoluteUrl('/media/img/pixel.gif') ?>" alt="Thumbnail"/>
+				<a class="remove-trigger">
-			<div>
+					remove <span>&times;</span>
-				<div class="file-name">
+				</a>
-					<label class="left">File:</label>
-					<strong>filename.jpg</strong>
-				</div>
 
-				<div class="safety">
+				<img class="thumbnail" src="<?php echo \Chibi\UrlHelper::absoluteUrl('/media/img/pixel.gif') ?>" alt="Thumbnail"/>
-					<label class="left">Safety:</label>
+				<div>
-					<label><input type="radio" name="safety" value="<?php echo PostSafety::Safe ?>" checked="checked"/> Safe for work</label>
+					<div class="file-name">
-					<label><input type="radio" name="safety" value="<?php echo PostSafety::Sketchy ?>"/> Sketchy</label>
+						<label class="left">File:</label>
-					<label><input type="radio" name="safety" value="<?php echo PostSafety::Unsafe ?>"/> Not safe for work</label>
+						<strong>filename.jpg</strong>
-				</div>
+					</div>
 
-				<div class="tags">
+					<div class="safety">
-					<label class="left">Tags:</label>
+						<label class="left">Safety:</label>
-					<input type="text" name="tags" placeholder="enter some tags&hellip;"/>
+						<label><input type="radio" name="safety" value="<?php echo PostSafety::Safe ?>" checked="checked"/> Safe for work</label>
+						<label><input type="radio" name="safety" value="<?php echo PostSafety::Sketchy ?>"/> Sketchy</label>
+						<label><input type="radio" name="safety" value="<?php echo PostSafety::Unsafe ?>"/> Not safe for work</label>
+					</div>
+
+					<div class="tags">
+						<label class="left">Tags:</label>
+						<input type="text" name="tags" placeholder="enter some tags&hellip;"/>
+					</div>
 				</div>
-			</div>
+				<div class="clear"></div>
-			<div class="clear"></div>
+			</form>
+		</div>
+
+		<div id="upload-no-posts">
+			<p class="alert alert-warning">Well, that&rsquo;s disappointing&hellip;</p>
+			<p><a href="<?php echo \Chibi\UrlHelper::route('post', 'list') ?>">Back to post list</a> or <a href="<?php echo \Chibi\UrlHelper::route('post', 'upload') ?>">try uploading again</a>.</p>
 		</div>
 	</div>