Initiate upload when autoUpload disabled. #15
Description
I use an upload button as a child control and have a member function that runs on the addFile event.
The addFile member function does some checking of the file to meet file size and extension restrictions before calling uploader.getUploadHandler().beginUploads(). It is clear that the addFile event is executing when I add a file, but it appears the the upload handler's __queue is empty when beginUploads() executes.
So, adding one file does nothing, but adding a second file just afterwards ends up uploading both files, even when the multiple flag is set to false.
Here is a trace in the console after adding the first file:
016872 project.sections.user.Profile[362-0]: NAME: IcoNinja_b.jpg SIZE: 32291
016873 project.sections.user.Profile[362-0]: QUEUE: [ ]
So you can see that the addFile event is firing normally but the uploader's queue is an empty array; this may be why no uploads occur. However, upon the second (different) file added, I get:
024531 project.sections.user.Profile[362-0]: NAME: IcoNinja_p.png SIZE: 15785
024532 project.sections.user.Profile[362-0]: QUEUE: [ File[613-0] ]
And we can see the uploader's queue is length 1 (I'm guessing the previously added file) but the two files are in fact uploaded.
024544 com.zenesis.qx.upload.XhrHandler[389-0]: onprogress: lengthComputable=true, total=32748, loaded=32748, headerLength=374
024564 com.zenesis.qx.upload.XhrHandler[389-0]: onprogress: lengthComputable=true, total=16241, loaded=16241, headerLength=374
Child control code:
_createChildControlImpl : function(id)
{
var control;
var btnMinMax = 160;
var imgMinMax = 150;
switch(id)
{
case 'profileBtn' :
control = new com.zenesis.qx.upload.UploadButton;
control.set({
minWidth : btnMinMax,
maxWidth : btnMinMax,
minHeight : btnMinMax,
maxHeight : btnMinMax,
padding : 5,
acceptUpload : '.jpg,.png,.gif'
});
var img = control.getChildControl('icon');
img.set({
minWidth : imgMinMax,
maxWidth : imgMinMax,
minHeight : imgMinMax,
maxHeight : imgMinMax,
scale : true
});
this.add(control);
this.__uploader = new com.zenesis.qx.upload.UploadMgr(control, "/uploads");
this.__uploader.set({
autoUpload : false,
multiple : false
});
this.__uploader.addListener('addFile', this.__addFile, this);
break;
}
return control || this.base(arguments, id);
}
The member function that runs on the addFile event
__addFile : function(e)
{
var file = e.getData();
var fileName = file.getFilename();
var fileSize = file.getSize();
var ext = fileName.split('.').pop().toLowerCase();
if(!qx.lang.Array.contains(['jpg', 'jpeg', 'png', 'gif'], ext))
{
project.Alert.getInstance().setMessage('Invalid file format!</br>Must be of type JPEG, PNG or GIF.');
this.__uploader.getUploadHandler().cancelAll();
//this.info('UPLOADER:', this.__uploader.getUploadHandler().__queue);
return;
}
if(fileSize > 2000000) // 2 MB
{
project.Alert.getInstance().setMessage('File too large!</br>Must be 1 MB or smaller.');
this.__uploader.getUploadHandler().cancelAll();
//this.info('UPLOADER:', this.__uploader.getUploadHandler().__queue);
return;
}
this.info('NAME:', fileName, 'SIZE:', fileSize);
this.info('QUEUE:', this.__uploader.getUploadHandler().__queue);
this.__uploader.setParam("fileName", fileName);
this.__uploader.setParam("sessionId", project.Model.getInstance().getSessionInfo().SESSION_ID);
this.__uploader.getUploadHandler().beginUploads();
var stateListener = file.addListener("changeState", function(evt) {
var state = evt.getData();
var file = evt.getTarget();
if(state == 'uploaded')
{
var btn = this.getChildControl('profileBtn');
btn.setIcon('/uploads/user/' + file.getResponse() + '?nocache=' + Math.random());
}
// Remove the listeners
if (state == 'uploaded' || state == 'cancelled')
{
file.removeListenerById(stateListener);
}
}, this);
}