tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
NEW: Show loading indicator when attaching files to UploadField
This commit is contained in:
Ingo Schommer 2014-03-26 07:51:57 +13:00
commit 181d8e549a
3 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/UploadField.css
View File

@ -53,3 +53,4 @@ Used in side panels and action tabs
.ss-upload .clear { clear: both; } .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 .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%; }

24
javascript/UploadField.js
View File

@ -295,18 +295,30 @@
dialog.ssdialog('open'); dialog.ssdialog('open');
}, },
attachFiles: function(ids, uploadedFileId) { attachFiles: function(ids, uploadedFileId) {
var self = this, config = this.getConfig(); var self = this,
$.post( config = this.getConfig(),
config['urlAttach'], indicator = $('<div class="loader" />'),
{'ids': ids}, target = (uploadedFileId) ? this.find(".ss-uploadfield-item[data-fileid='"+uploadedFileId+"']") : this.find('.ss-uploadfield-addfile');
function(data, status, xhr) {
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', { self.fileupload('attach', {
files: data, files: data,
options: self.fileupload('option'), options: self.fileupload('option'),
replaceFileID: uploadedFileId replaceFileID: uploadedFileId
}); });
} }
); });
} }
}); });
$('div.ss-upload *').entwine({ $('div.ss-upload *').entwine({

4
scss/UploadField.scss
View File

@ -284,4 +284,8 @@
line-height: 30px; 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%;
}
} }