PDA

View Full Version : File Upload & getUpdateManager problem



angusf
3 Jan 2007, 3:09 AM
Hi I have some code, pasted below, that works. It submits form data, replacing the contents of a div called "contents" with a message "loading..." & on response from server displaying the results in the same div.




function sendContentsForm(p_form) {
var theForm = document.getElementById(p_form);
var contents = YAHOO.ext.Element.get("contents");
var updateMgr = contents.getUpdateManager();

var failedLoad = function () {contents.update("Submitting form failed :-(");};
var okLoad = function () {var tmpVal = document.inkoidviewer.checkLogin();};

updateMgr.onFailure.subscribe(failedLoad);
updateMgr.onUpdate.subscribe(okLoad);
updateMgr.formUpdate(theForm, null, true, null);
}


However when I try to add a file input field & make the enctype="multipart/form-data" the submitting no longer occurs unless I make "contents" another element so the form is not removed/replaced by the "loading..." message - then the form data is submitted ok, including the file, but the resulting html is no longer returned/displayed.

What might I be doing wrong. How do I get an element to update with server response when submitting file data from a form?

Also I learnt the hardway that having a submit button with attribute name="submit" will cause an error at this._formNode.submit(); (line 828 of yui connection.js) along the lines of "no function named submit". Renaming the submit field solved the problem for me.

nanotron
5 Jan 2007, 1:19 PM
I've encountered the same problem.
Anyone any suggestions?

nanotron
5 Jan 2007, 3:35 PM
okay..

following change made it:

In the function formUpdate in UpdateManger

var callback = {
//success: this.successDelegate,
upload: this.successDelegate,
failure: this.failureDelegate,
timeout: (this.timeout*1000),
argument: {'url': url, 'form': form, 'callback': callback, 'reset': reset}
};

best regards
nanotron

ps:
i love this framework

mindows
31 Jan 2007, 3:04 PM
okay..

following change made it:

In the function formUpdate in UpdateManger

var callback = {
//success: this.successDelegate,
upload: this.successDelegate,
failure: this.failureDelegate,
timeout: (this.timeout*1000),
argument: {'url': url, 'form': form, 'callback': callback, 'reset': reset}
};

best regards
nanotron

ps:
i love this framework

i had the same problem and tried your suggestion. it seems to fix the problem :) is there a reason for commenting out the success event?

tryanDLS
31 Jan 2007, 5:25 PM
I don't think this is the right solution. You should probably use the setRenderer method to write the response data to a different html element and use the formUpdate logic the way it was designed with the correct enctype.

Your implementation requires that you either
1) change your version of UpdateManager, which would break any non-upload type of updates, or
2) create a new object that inherits from UpdateManager and replaces the formUpdate method, or
3) override the method via prototype for every instance you create that needs this functionality.

mindows
31 Jan 2007, 9:23 PM
I'm not sure if setRenderer actually solves the problem since the issue here is a missing handler. According to the yui doc, since file uploads are done through iframe it can't really tell you whether it was successful or not. I'm guessing that's why it requires an 'update' handler instead of 'success'.

For now, adding the missing handler seems to be a workaround. I've chosen the #1 method tryanDLS mentioned above, without affecting the non-upload updates (hopefully). This obviously means that I have to rememer to do this again when a new version comes out..

I hope Jack can comment on this briefly, whether this was intentional or it's just a small bug that will be addressed in the future. Not a big deal, just curious.
thanks,

Animal
1 Feb 2007, 1:05 AM
This should be fixable to handle both types of submission. Looking at the source we have



formUpdate : function(form, url, reset, callback){
if(this.beforeUpdate.fireDirect(this.el, form, url) !== false){
this.showLoading();
formEl = YAHOO.util.Dom.get(form);
if(typeof url == 'function'){
url = url();
}
if(typeof params == 'function'){
params = params();
}
url = url || formEl.action;
var callback = {
success: this.successDelegate,
failure: this.failureDelegate,
timeout: (this.timeout*1000),
argument: {'url': url, 'form': form, 'callback': callback, 'reset': reset}
};
var isUpload = false;
var enctype = formEl.getAttribute('enctype');
if(enctype && enctype.toLowerCase() == 'multipart/form-data'){
isUpload = true;
}
YAHOO.util.Connect.setForm(form, isUpload, this.sslBlankUrl);
this.transaction = YAHOO.util.Connect.asyncRequest('POST', url, callback);
}
},


This could be



formUpdate : function(form, url, reset, callback){
if(this.beforeUpdate.fireDirect(this.el, form, url) !== false){
this.showLoading();
formEl = YAHOO.util.Dom.get(form);
var isUpload = false;
var enctype = formEl.getAttribute('enctype');
if(enctype && enctype.toLowerCase() == 'multipart/form-data'){
isUpload = true;
}
if(typeof url == 'function'){
url = url();
}
if(typeof params == 'function'){
params = params();
}
url = url || formEl.action;
var callback = {
failure: this.failureDelegate,
timeout: (this.timeout*1000),
argument: {'url': url, 'form': form, 'callback': callback, 'reset': reset}
};
callback[isUpload ? "upload" : "success"] = this.successDelegate;
YAHOO.util.Connect.setForm(form, isUpload, this.sslBlankUrl);
this.transaction = YAHOO.util.Connect.asyncRequest('POST', url, callback);
}
},

Animal
12 Feb 2007, 8:28 AM
Bump!

coz I've just hit this too, now I'm uploading files...

Jack, is this fixed in your latest branch?

Animal
12 Feb 2007, 8:31 AM
In fact, keeping to the convention that event handlers are passed Ext.Elements rather than DOM elements, and including the fix for passing an Ext.Element into the callback, it really should be



formUpdate : function(form, url, reset, callback){
formEl = YAHOO.util.Dom.get(form);
if(this.beforeUpdate.fireDirect(this.el, formEl, url) !== false){
this.showLoading();
var isUpload = false;
var enctype = formEl.getAttribute('enctype');
if(enctype && enctype.toLowerCase() == 'multipart/form-data'){
isUpload = true;
}
if(typeof url == 'function'){
url = url();
}
if(typeof params == 'function'){
params = params();
}
url = url || formEl.action;
var callback = {
failure: this.failureDelegate,
timeout: (this.timeout*1000),
argument: {'url': url, 'form': formEl, 'callback': callback, 'reset': reset}
};
callback[isUpload ? "upload" : "success"] = this.successDelegate;
YAHOO.util.Connect.setForm(form, isUpload, this.sslBlankUrl);
this.transaction = YAHOO.util.Connect.asyncRequest('POST', url, callback);
}
},