2
* jquery.plupload.queue.js
4
* Copyright 2009, Moxiecode Systems AB
5
* Released under GPL License.
7
* License: http://www.plupload.com/license
8
* Contributing: http://www.plupload.com/contributing
11
// JSLint defined globals
12
/*global plupload:false, jQuery:false, alert:false */
18
return plupload.translate(str) || str;
21
function renderUI(id, target) {
22
// Remove all existing non plupload items
23
target.contents().each(function(i, node) {
26
if (!node.is('.plupload')) {
32
'<div class="plupload_wrapper plupload_scroll">' +
33
'<div id="' + id + '_container" class="plupload_container">' +
34
'<div class="plupload">' +
35
'<div class="plupload_header">' +
36
'<div class="plupload_header_content">' +
37
'<div class="plupload_header_title">' + _('Select files') + '</div>' +
38
'<div class="plupload_header_text">' + _('Add files to the upload queue and click the start button.') + '</div>' +
42
'<div class="plupload_content">' +
43
'<div class="plupload_filelist_header">' +
44
'<div class="plupload_file_name">' + _('Filename') + '</div>' +
45
'<div class="plupload_file_action"> </div>' +
46
'<div class="plupload_file_status"><span>' + _('Status') + '</span></div>' +
47
'<div class="plupload_file_size">' + _('Size') + '</div>' +
48
'<div class="plupload_clearer"> </div>' +
51
'<ul id="' + id + '_filelist" class="plupload_filelist"></ul>' +
53
'<div class="plupload_filelist_footer">' +
54
'<div class="plupload_file_name">' +
55
'<div class="plupload_buttons">' +
56
'<a href="#" class="plupload_button plupload_add">' + _('Add files') + '</a>' +
57
'<a href="#" class="plupload_button plupload_start">' + _('Start upload') + '</a>' +
59
'<span class="plupload_upload_status"></span>' +
61
'<div class="plupload_file_action"></div>' +
62
'<div class="plupload_file_status"><span class="plupload_total_status">0%</span></div>' +
63
'<div class="plupload_file_size"><span class="plupload_total_file_size">0 b</span></div>' +
64
'<div class="plupload_progress">' +
65
'<div class="plupload_progress_container">' +
66
'<div class="plupload_progress_bar"></div>' +
69
'<div class="plupload_clearer"> </div>' +
74
'<input type="hidden" id="' + id + '_count" name="' + id + '_count" value="0" />' +
79
$.fn.pluploadQueue = function(settings) {
81
this.each(function() {
82
var uploader, target, id;
85
id = target.attr('id');
89
target.attr('id', id);
92
uploader = new plupload.Uploader($.extend({
97
uploaders[id] = uploader;
99
function handleStatus(file) {
102
if (file.status == plupload.DONE) {
103
actionClass = 'plupload_done';
106
if (file.status == plupload.FAILED) {
107
actionClass = 'plupload_failed';
110
if (file.status == plupload.QUEUED) {
111
actionClass = 'plupload_delete';
114
if (file.status == plupload.UPLOADING) {
115
actionClass = 'plupload_uploading';
118
var icon = $('#' + file.id).attr('class', actionClass).find('a').css('display', 'block');
120
icon.attr('title', file.hint);
124
function updateTotalProgress() {
125
$('span.plupload_total_status', target).html(uploader.total.percent + '%');
126
$('div.plupload_progress_bar', target).css('width', uploader.total.percent + '%');
127
$('span.plupload_upload_status', target).text(
128
_('Uploaded %d/%d files').replace(/%d\/%d/, uploader.total.uploaded+'/'+uploader.files.length)
132
function updateList() {
133
var fileList = $('ul.plupload_filelist', target).html(''), inputCount = 0, inputHTML;
135
$.each(uploader.files, function(i, file) {
138
if (file.status == plupload.DONE) {
139
if (file.target_name) {
140
inputHTML += '<input type="hidden" name="' + id + '_' + inputCount + '_tmpname" value="' + plupload.xmlEncode(file.target_name) + '" />';
143
inputHTML += '<input type="hidden" name="' + id + '_' + inputCount + '_name" value="' + plupload.xmlEncode(file.name) + '" />';
144
inputHTML += '<input type="hidden" name="' + id + '_' + inputCount + '_status" value="' + (file.status == plupload.DONE ? 'done' : 'failed') + '" />';
148
$('#' + id + '_count').val(inputCount);
152
'<li id="' + file.id + '">' +
153
'<div class="plupload_file_name"><span>' + file.name + '</span></div>' +
154
'<div class="plupload_file_action"><a href="#"></a></div>' +
155
'<div class="plupload_file_status">' + file.percent + '%</div>' +
156
'<div class="plupload_file_size">' + plupload.formatSize(file.size) + '</div>' +
157
'<div class="plupload_clearer"> </div>' +
164
$('#' + file.id + '.plupload_delete a').click(function(e) {
165
$('#' + file.id).remove();
166
uploader.removeFile(file);
172
$('span.plupload_total_file_size', target).html(plupload.formatSize(uploader.total.size));
174
if (uploader.total.queued === 0) {
175
$('span.plupload_add_text', target).text(_('Add files.'));
177
$('span.plupload_add_text', target).text(uploader.total.queued + ' files queued.');
180
$('a.plupload_start', target).toggleClass('plupload_disabled', uploader.files.length == (uploader.total.uploaded + uploader.total.failed));
182
// Scroll to end of file list
183
fileList[0].scrollTop = fileList[0].scrollHeight;
185
updateTotalProgress();
187
// Re-add drag message if there is no files
188
if (!uploader.files.length && uploader.features.dragdrop && uploader.settings.dragdrop) {
189
$('#' + id + '_filelist').append('<li class="plupload_droptext">' + _("Drag files here.") + '</li>');
193
uploader.bind("UploadFile", function(up, file) {
194
$('#' + file.id).addClass('plupload_current_file');
197
uploader.bind('Init', function(up, res) {
198
renderUI(id, target);
200
// Enable rename support
201
if (!settings.unique_names && settings.rename) {
202
$('#' + id + '_filelist div.plupload_file_name span', target).live('click', function(e) {
203
var targetSpan = $(e.target), file, parts, name, ext = "";
205
// Get file name and split out name and extension
206
file = up.getFile(targetSpan.parents('li')[0].id);
208
parts = /^(.+)(\.[^.]+)$/.exec(name);
214
// Display input element
215
targetSpan.hide().after('<input type="text" />');
216
targetSpan.next().val(name).focus().blur(function() {
217
targetSpan.show().next().remove();
218
}).keydown(function(e) {
219
var targetInput = $(this);
221
if (e.keyCode == 13) {
224
// Rename file and glue extension back on
225
file.name = targetInput.val() + ext;
226
targetSpan.text(file.name);
233
$('a.plupload_add', target).attr('id', id + '_browse');
235
up.settings.browse_button = id + '_browse';
238
if (up.features.dragdrop && up.settings.dragdrop) {
239
up.settings.drop_element = id + '_filelist';
240
$('#' + id + '_filelist').append('<li class="plupload_droptext">' + _("Drag files here.") + '</li>');
243
$('#' + id + '_container').attr('title', 'Using runtime: ' + res.runtime);
245
$('a.plupload_start', target).click(function(e) {
246
if (!$(this).hasClass('plupload_disabled')) {
253
$('a.plupload_stop', target).click(function(e) {
258
$('a.plupload_start', target).addClass('plupload_disabled');
263
uploader.bind("Error", function(up, err) {
264
var file = err.file, message;
267
message = err.message;
270
message += " (" + err.details + ")";
273
if (err.code == plupload.FILE_SIZE_ERROR) {
274
alert(_("Error: File too large: ") + file.name);
277
if (err.code == plupload.FILE_EXTENSION_ERROR) {
278
alert(_("Error: Invalid file extension: ") + file.name);
282
$('#' + file.id).attr('class', 'plupload_failed').find('a').css('display', 'block').attr('title', message);
286
uploader.bind('StateChanged', function() {
287
if (uploader.state === plupload.STARTED) {
288
$('li.plupload_delete a,div.plupload_buttons', target).hide();
289
$('span.plupload_upload_status,div.plupload_progress,a.plupload_stop', target).css('display', 'block');
290
$('span.plupload_upload_status', target).text('Uploaded ' + uploader.total.uploaded + '/' + uploader.files.length + ' files');
292
if (settings.multiple_queues) {
293
$('span.plupload_total_status,span.plupload_total_file_size', target).show();
297
$('a.plupload_stop,div.plupload_progress', target).hide();
298
$('a.plupload_delete', target).css('display', 'block');
302
uploader.bind('QueueChanged', updateList);
304
uploader.bind('FileUploaded', function(up, file) {
308
uploader.bind("UploadProgress", function(up, file) {
309
// Set file specific progress
310
$('#' + file.id + ' div.plupload_file_status', target).html(file.percent + '%');
313
updateTotalProgress();
315
if (settings.multiple_queues && uploader.total.uploaded + uploader.total.failed == uploader.files.length) {
316
$(".plupload_buttons,.plupload_upload_status", target).css("display", "inline");
317
$(".plupload_start", target).addClass("plupload_disabled");
318
$('span.plupload_total_status,span.plupload_total_file_size', target).hide();
322
// Call setup function
323
if (settings.setup) {
324
settings.setup(uploader);
330
// Get uploader instance for specified element
331
return uploaders[$(this[0]).attr('id')];