Javascript – Ajax file upload using Yahoo API

Web user interfaces have been very dynamic after the introduction of AJAX. People are now more used to with pages that do not refresh on every click. For developers it has been a challenge to build sites that are more user friendly and to achieve that file upload without refreshing the page is a big challenge. Thanks to all the javascript frameworks available on the web now that allow developers to add features like file uploading in minutes which used to take weeks before. In this article I would describe how someone can add a file upload feature using Yahoo Javascript API.

Open your HTML/PHP/ASP( or whatever) file where your form is located. Following is a typical html code for file upload:

<form name="upload_file" action="your_script_location" method="post" enctype="multipart/form-data"> <input name="my_file" type="file" /> <input name="submit_form" type="submit" value="Upload" /> </form>

For ajax uploading without refreshing the page, YAHOO API needs to add the following scripts:

<script src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js"></script> <script src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js"></script> <script src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js">


Now on the onclick event of the submit button, we have to call our own custom submit function that'll call the yahoo's Ajax file uploader function and also we better make the submit button to a typical html button to prevent the page to be resubmitted. Following is a sample function that'll do it:
function uploadImage(){

  YAHOO.util.Connect.setForm('upload_file', true);

  var URL = 'your_script_location';

  var cObj = YAHOO.util.Connect.asyncRequest('GET', URL, fileUploadCallback);

}


Here,
upload_file is the form name
your_script_location is the location of the back-end script that'll process the file
fileUploadCallback is the reference to the call back object that'll handle the server response
A sample call back object can be something like this:
var fileUploadCallback = {

      upload:function(o){

        alert('Upload successfully' + "\n" + 'Server Response: ' + o.responseText);

      }

    };
Only the upload event is added in the callback object as the script handles only file upload. For other types of html fields, you should add other events like start, complete, failure etc. For a complete detail, please visit Yahoo API Official Documentation
Finally your file should have code like the following:



<html>

  <head>

    <title>Imran's Ajax file upload tool</title>

    <script src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js"></script>

    <script src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js"></script>

    <script src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"></script>

    <script language="javascript">

    var fileUploadCallback = {

      upload:function(o){

        alert('Uploaded successfully' + "\n" + 'Server Response: ' + o.responseText);

      }

    };

    function uploadFile(){

      YAHOO.util.Connect.setForm('upload_file', true);

      var URL = 'your_script_location';

      var cObj = YAHOO.util.Connect.asyncRequest('GET', URL, fileUploadCallback);

    }

    </script>

  </head>

  <body>

    <form name="upload_file" action="" method="post" enctype="multipart/form-data">

       <input name="name="my_file" type="file" /> <input name="submit_form" type="button" value="Upload" onclick="uploadFile(); alert('aaa'); return false;" />

    </form>

  </body>

</html>
If the file is uploaded successfully it will alert the text "Uploaded successfully" along with the response of the server. 
Good luck.


                              AJAX file upload, Yahoo API
          
                    
			
                This entry was posted on Sunday, July 26th, 2009 and is filed under AJAX,  Javascript. You can follow any responses to this entry through RSS 2.0.                You can leave a response, or trackback from your own site.