diff --git a/css/UploadField.css b/css/UploadField.css index 8d5ffcdd3..d4df94d49 100644 --- a/css/UploadField.css +++ b/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%; } diff --git a/javascript/UploadField.js b/javascript/UploadField.js index 630a4a547..5f791306c 100644 --- a/javascript/UploadField.js +++ b/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 = $('
'), + 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({ diff --git a/scss/UploadField.scss b/scss/UploadField.scss index 61a4bccbb..57fb1098e 100644 --- a/scss/UploadField.scss +++ b/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%; + } } \ No newline at end of file