Merge pull request #2914 from kinglozzer/uploadfield-attach-loader

NEW: Show loading indicator when attaching files to UploadField

css/UploadField.css

@@ -53,3 +53,4 @@ Used in side panels and action tabs
 
 .ss-upload .clear { clear: both; }
 .ss-upload .ss-uploadfield-fromcomputer input { /* since we can't really style the file input, we use this hack to make it as big as the button and hide it */ position: absolute; top: 0; right: 0; margin: 0; opacity: 0; filter: alpha(opacity=0); transform: translate(-300px, 0) scale(4); font-size: 23px; direction: ltr; cursor: pointer; height: 30px; line-height: 30px; }
+.ss-upload .loader { height: 94px; background: transparent url(../admin/images/spinner.gif) no-repeat 50% 50%; }

javascript/UploadField.js

@@ -295,18 +295,30 @@
 				dialog.ssdialog('open');
 			},
 			attachFiles: function(ids, uploadedFileId) {
-				var self = this, config = this.getConfig();
-				$.post(
-					config['urlAttach'], 
-					{'ids': ids},
-					function(data, status, xhr) {
+				var self = this,
+					config = this.getConfig(),
+					indicator = $('<div class="loader" />'),
+					target = (uploadedFileId) ? this.find(".ss-uploadfield-item[data-fileid='"+uploadedFileId+"']") : this.find('.ss-uploadfield-addfile');
+
+				target.children().hide();
+				target.append(indicator);
+
+				$.ajax({
+					type: "POST",
+					url: config['urlAttach'],
+					data: {'ids': ids},
+					complete: function(xhr, status) {
+						target.children().show();
+						indicator.remove();
+					},
+					success: function(data, status, xhr) {
 						self.fileupload('attach', {
 							files: data,
 							options: self.fileupload('option'),
 							replaceFileID: uploadedFileId
 						});
 					}
-				);
+				});
 			}
 		});
 		$('div.ss-upload *').entwine({

scss/UploadField.scss

@@ -284,4 +284,8 @@
 			line-height: 30px;
 		}
 	}
+	.loader {
+		height: 94px; // Approxmiately matches the height of the field once a file is attached, avoids a 'jump' in size
+		background: transparent url(../admin/images/spinner.gif) no-repeat 50% 50%;
+	}
 }