Asynchronous File Upload – YUI’s Approach

Download YUI
Test upload example online
Online Example Source

YUI is a truly amazing framework for those who are writing Ajax applications. Its JavaScript widgets allow programmer to create richly interactive UI components with ease. However, these UI widgets are not very useful unless the end result of the interaction can be saved to the server side. Hence YUI has added Ajax support to most of its widgets. While many people are familiar with YUI Connection Manager's Ajax capability, only a few know that Connection Manager can be used to simulate Ajax-like file upload.

The theory that makes asynchronous file upload work is not complicate, but the code for it to work can be a little bit lengthy if it was developed from the scratch. Since there no reason to reinvent the wheel and YUI's Connection Manager can take care of most of the dirty jobs for us, in this article, I'll show you how to use it to do a simple asynchronous file upload. Because XMLHttpRequest object does not support file upload, the Connection Manager uses inline frame approach. Basically what the Connection Manager does is it creates an invisible IFRAME for file upload and parses the server response once the upload is completed. In the end, what you get is an illusion of Ajax-like file upload interaction. However, since this is an IFRAME, some Ajax events such as success or failure are not available in IFRAME method as they are available in regular Ajax request in YUI.

Test upload example online

Preparation

This script uses YUI's Connection Manager, you can either download it to your hard drive or you can include it directly from YUI online repository.

Include the following JavaScript file to your HTML page:

or from YUI repository:

HTML Upload Form

Create an upload form as usual and assign the form field an id:

In above case, we've assigned the id testForm to our form.

Coding JavaScript

First, we need to create a event handler to handle the click event of the upload button:

Upload Button Handler:

Call setForm method:

As soon as the user clicks on the upload button, we use Connection Manager to do the actual upload. In order to do so, we must let YUI know which form we are dealing with: we first call setForm method of the Connection Manager, supply the form ID we assigned earlier and set the second argument of the setForm to true to indicate that this is a file upload request.

Establish an Asynchronous Request:

Now, we are ready to upload files. Invoke asyncRequest method of the Connection Manager and specify request method as 'POST', the URL where files upload to, and the upload handler. The upload handler is an JavaScript associative array, in which the array key specifies type of event to handle and the array value is a callback function with signature function(response){}.

Since this is a file upload request, we need to handle the upload event. Here's how: in the upload handler, create a key-value pair with "upload" as key and a callback function as value. The callback function will be invoked when the server response is returned. For more information about upload handler, please see Callback Object and File Upload

The argument of the callback function, in this case response, contains information of server response. You can access text contents returned from the server after a file upload request by response.responseText or response.responseXML if the content type is XML. For more information, please visit Connection Manager Upload Case.

Writing Server-Side Code

Your can write your server-side code in any programming language. For demonstration purpose, we will use PHP to handle file upload request. Since this is not an PHP file upload tutorial, I wrote an one line code snip that shows information of an uploaded file. You can use this information to confirm that whether a file has been successfully uploaded or not:

If everything has gone well and you have this line alert( response.responseText ); in your upload handler (a handler is just a JavaScript function), you should see a message box similar to the one shown below, which indicates the file has been successfully uploaded:

File Upload Response

Putting Everything Together

Related Reading

Links

68 Comments Asynchronous File Upload – YUI’s Approach

  1. Pingback: Top 100 AJAX with PHP Tahun 2007 - Get & Give

  2. Pingback: 120+ Javascript, Ajax, jQuery Mega Toolbox | tripwire magazine

  3. Pingback: AJAX image cropper with YUI and PHP | Bookmarks

  4. Pingback: YUI file upload with jsp backend - Bandos’ Arcade

  5. Daniel

    I have done it, however I cannot reach form fields nor querystrings and I don't know the reason. I'm using classic ASP. Does it happen in PHP? How do you catch input forms / querystrings sent with the file?

  6. Pingback: Using SWFUpload with Django » I Am Cloudtunes

  7. sanu

    Hi, Nice demo, I have an issue using this in my web app as we are not allowed to do any other scripting language. Any idea how we do without PHP? can we have the code ported for Java?

    Thank you

    Sanu

  8. mmm

    i have a problem. am trying to create a form having space for comments but am not able to output the comments at the bottom. help

  9. Bharathi

    Hi,
    I am trying to upload a text file like resume and read the data from that. is it possible using YUI?... if YES na How? any one can help me. i am a new one to YUI. Pls.

  10. gary

    I can't get this to work so far I get to that point

    If everything has gone well and you have this line alert( response.responseText ); in your upload handler (a handler is just a JavaScript function), you should see a message box similar to the one shown below, which indicates the file has been successfully uploaded:
    I need to know what to do next and what changes i need to make in upload.php to make it work. Im a newbie

  11. gary

    I can't get this to work so far I get to that point
    the page at http://localhost says....

    I need to know what to do next and what changes i need to make in upload.php to make it work. Im a newbie

Comments are closed.