Alexandre/Gilles,
Whichever you feels like helping out again. Here is where I'm at.
I've got everything almost exactly like I wanted but I'm getting
behavior that I didn't expect.
As I'm understanding when you choose a file for upload it gets added
to a queue.
So the queueStarted callback would kick in at that point.
Then as the first file in the queue starts the fileUploadStarted
callback would kick in. But that doesn't ever seem to happen.
Third I would assume that the queueCompleted callback would only occur
after ALL of the files hae uploaded but it seems to kick in
immediately after the first file is finished uploading. This is
wreaking havoc with the interface I'm trying to setup.
Am I misunderstanding the order that the callbacks occur? I've
included the full javascript if that helps at all.
<code>
<script type="text/javascript">
// Constants
jQuery.uploader.swfURL = '$cp_url' + 'modules/images/jQuery.uploader/
jQuery.uploader.swf';
jQuery.uploader.backendScript = '$site_url' + 'index.php?ACT=
$action_id';
jQuery(document).ready(function() {
// Step 1: Resize the overlay to match the dimensions of the browse
link
jQuery('#uploaderOverlay').height(jQuery('#btnBrowse').height());
jQuery('#uploaderOverlay').width(jQuery('#btnBrowse').width());
// Step 2: Add the uploader
var oUpload = $('#uploaderOverlay').uploader({
swfURL: jQuery.uploader.swfURL,
logging: "0"
});
// Step 3: Overwrite the events (base events have allready been
setup)
jQuery.extend(oUpload.events, {
// SWF ready handler, used to bind the events the way YOU want.
uploaderReady: function() {
this.setFilters([
{ description: 'Image files
(*.jpg;*.gif;*.png)', extensions:
'*.jpg;*.gif;*.png' }
]);
this.setMaxFileSize(6291456);
this.setMaxQueueCount(33);
},
// File added handler
fileAdded: function(args) {
this.upload(args.fileData.id,
jQuery.uploader.backendScript);
},
// Triggered when upload queue starts
queueStarted: function() {
$('#btnBrowse').hide();
$('#spinner').show();
},
// Triggered when upload starts
fileUploadStarted: function(args) {
$("p#progress").html('<strong>Uploading:</strong> ' +
args.fileData.name);
},
// Triggered when upload finishes
fileUploadCompleted: function(args) {
// You need to remove the file from the queue or else
you can't
upload any more!
this.remove(args.fileData.id);
},
// Triggered when a file has an error
fileUploadError: function(args) {
// You need to remove the file from the queue or else
you can't
upload any more!
this.remove(args.fileData.id);
},
// Server data returned
fileUploadServerData: function(args) {
var form_elements = args.serverData;
jQuery('#uploadedFiles').append(form_elements);
// Make sure style is different for the first image
$('table.image_container:first').addClass('first_image');
// Get the current number of images uploaded
var image_count = $('table.image_container').size();
// Update the image count hidden input value
$('input[name="image_count"]').val(image_count);
// Insert image number above thumbnail
$('table.image_container:last tr td.image').prepend
('<p><strong>Image ' + image_count + '</strong></p>');
// Append image number the input names
$('table.image_container:last input,
table.image_container:last
textarea').each(function () {
var new_name = $(this).attr('name') + '_' +
image_count;
$(this).attr('name', new_name);
});
},
// Triggered when upload queue finishes
queueCompleted: function() {
$('div.initial_controls').hide();
$('div.secondary_controls').show();
}
});
});
</script>
</code>
