Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

NEW: Show loading indicator when attaching files to UploadField #2914

Merged
merged 1 commit into from

3 participants

Loz Calver Ingo Schommer Simon Welsh
Loz Calver
Collaborator

Currently, no indication is shown to the CMS user than anything is actually happening.

Is the attach functionality used anywhere outside a “standard” UploadField (e.g. AssetUploadField?) I can’t seem to find any usage of it anywhere else.

Attaching:
screen shot 2014-03-03 at 21 13 54

Attaching a second file:
screen shot 2014-03-03 at 21 14 15

Attaching via ‘choose another file’:
screen shot 2014-03-03 at 21 14 44

javascript/UploadField.js
((13 lines not shown))
$.post(
config['urlAttach'],
{'ids': ids},
function(data, status, xhr) {
+ target.children().show();
Ingo Schommer Owner
chillu added a note

Can we do this on complete rather than just on success?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
scss/UploadField.scss
@@ -238,4 +238,8 @@
line-height: 30px;
}
}
+ .loader {
+ height: 94px;
Ingo Schommer Owner
chillu added a note

Can you document why that's 94px?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Ingo Schommer
Owner

Great improvement, thanks Loz!

Loz Calver
Collaborator

Documented CSS property, switched to $.ajax() so we can use a ‘complete’ callback and rebased :)

Ingo Schommer chillu merged commit 181d8e5 into from
Ingo Schommer
Owner

Thanks mate!

Loz Calver kinglozzer deleted the branch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
1  css/UploadField.css
View
@@ -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%; }
24 javascript/UploadField.js
View
@@ -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({
4 scss/UploadField.scss
View
@@ -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%;
+ }
}
Something went wrong with that request. Please try again.