Monday, September 10th, 2007
Asynchronous File Upload with YUI
Cuong Tham has written up an example of implementing asynchronous file upload using YUI.
His example walks through the steps required to build the functionality, and ends up with the following simple meat:
JAVASCRIPT:
-
-
function init(){
-
var onUploadButtonClick = function(e){
-
//the second argument of setForm is crucial,
-
//which tells Connection Manager this is a file upload form
-
YAHOO.util.Connect.setForm('testForm', true);
-
-
var uploadHandler = {
-
upload: function(o) {
-
alert(o.responseText);
-
}
-
};
-
YAHOO.util.Connect.asyncRequest('POST', 'upload.php', uploadHandler);
-
};
-
YAHOO.util.Event.on('uploadButton', 'click', onUploadButtonClick);
-
-
}
-
-
YAHOO.util.Event.on(window, 'load', init);
-
Will browsers ever implement a richer type="file"? Do we need to spec out a better way to do this?
2.7 rating from 33 votes
i’m an avid user of the YUI connection component.. so much so that i’ve pretty much forgotten how to code bareback XMLHttpRequest().
the file upload feature is great as it is.. but what i would absolutely LOVE is that Yahoo! include multiple file upload.
that would make my day.
so far works good for me also the article is well described!
thumbs up!
@Shaun
Its not Yahoo! that needs to add multiple file upload. It’s the browsers that would need to enable it (and the standards, of course)
@saun
http://www.seemysites.net/projFolder/uploader/
LightLoader
Track Multiple File Uploads Using AJAX
With Progress Bar
is that what you need ?
They state on the LightLoader website that it only supports PHP at the moment in it’s full form.
I can use a file input type so the user can select a file. But to do anything with the file I’ve got to upload it to my server then echo it straight back to the browser. I really would like to use the file input element in my RIA to read the local file without bouncing it off my server first. Any ideas? … please no ActiveX, Applet or XUL - I already know how to do it with those.