Loading ...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,
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 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 by Imran on September 27th, 2009
Seems cool!! Thanks for sharing.
#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
#4 by Nirmal on June 4th, 2010
can “your_script_location” be on remote server ?
and what is the format of response ? text or json !!
#5 by Imran on June 4th, 2010
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 by Swathi on June 27th, 2011
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 by david on September 14th, 2011
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 by Imran on September 14th, 2011
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.