Monday, September 10th, 2007

Asynchronous File Upload with YUI

Category: Examples, Yahoo!

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

  1. function init(){
  2.   var onUploadButtonClick = function(e){
  3.     //the second argument of setForm is crucial,
  4.     //which tells Connection Manager this is a file upload form
  5.     YAHOO.util.Connect.setForm('testForm', true);
  6.        
  7.     var uploadHandler = {
  8.       upload: function(o) {
  9.         alert(o.responseText);
  10.       }
  11.   };
  12.   YAHOO.util.Connect.asyncRequest('POST', 'upload.php', uploadHandler);
  13. };
  14. YAHOO.util.Event.on('uploadButton', 'click', onUploadButtonClick);
  15.  
  16. }
  17.  
  18. 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?

YUI Upload Example

Posted by Dion Almaer at 4:34 am
6 Comments

++---
2.9 rating from 54 votes

6 Comments »

Comments feed TrackBack URI

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.

Comment by Shaun — September 10, 2007

so far works good for me also the article is well described!
thumbs up!

Comment by ajaxus — September 10, 2007

@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)

Comment by Jabapyth — September 10, 2007

@saun

http://www.seemysites.net/projFolder/uploader/

LightLoader
Track Multiple File Uploads Using AJAX
With Progress Bar

is that what you need ?

Comment by Yassine El Houm — September 11, 2007

They state on the LightLoader website that it only supports PHP at the moment in it’s full form.

Comment by Steve — September 17, 2007

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.

Comment by Chris Phillips — October 3, 2007

Leave a comment

You must be logged in to post a comment.