1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

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.

    Bookmark and Share

    ,

    1. #1 by Saikat on September 27th, 2009

      Imran bhai,
      please check this. file unloader… best ajax based
      upload ..i ever seen :)

      http://www.uploadify.com/demo/

    2. #2 by Imran on September 27th, 2009

      Seems cool!! Thanks for sharing.

    3. #3 by Asvarox on October 12th, 2009

      Nice entry. Since I’m not deep into javascript (still willing to be), I’d love to read how it works ;)

    (will not be published)
    Security Code:

    1. No trackbacks yet.