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(); 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.

    ,

    1. #1 by Saikat on September 27, 2009 - 3:53 pm

      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 27, 2009 - 10:37 pm

      Seems cool!! Thanks for sharing.

    3. #3 by Asvarox on October 12, 2009 - 12:58 am

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

    4. #4 by Nirmal on June 4, 2010 - 3:17 pm

      can “your_script_location” be on remote server ?

      and what is the format of response ? text or json !!

    5. #5 by Imran on June 4, 2010 - 3:24 pm

      Yes, “your_script_location” can be any valid file location.

      The response text is the text that your script is returning. So it is upto you whether you like XML, JSON or simple text. There is no rule for that.

    6. #6 by Swathi on June 27, 2011 - 4:20 pm

      Hi ,
      I have s:file upload tag in my jsp.and one sx:autocompleter tag.
      if i change the element in sx:autocompleter the ajax to work.
      But the s:file tag is preventing not to work ajax properly.
      Can you give me some idea.Pls…..
      Im trying this for past one week…..
      Thanks in advance.

    7. #7 by david on September 14, 2011 - 9:19 am

      hi i have try your code to test run in my server.

      i cant find out the the file is uploaded or not because i cant find the file is it anything i make wrong?

    8. #8 by Imran on September 14, 2011 - 9:28 am

      Hi David,

      This is the front-end code for the script.
      Note this “var URL = ‘your_script_location’;”
      ‘your_script_location’ is the script on your server that should handle the file. You can save the uploaded file to any location on your server.
      In PHP you can use “move_uploaded_file()” function in your script to save the file in your server. For other language, you should have similar functions.

    9. #9 by rejitha on April 19, 2013 - 5:57 pm

      The responseText i receive back from the server is false in case of IE9

      Anyone has a clue on why it is happening ? Pls help

    Comments are closed.