<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Bandos&#039; Arcade &#187; YUI</title>
	<atom:link href="http://www.nuwanbando.com/tag/yui/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.nuwanbando.com</link>
	<description>&#34;It&#039;s not about how it is, but how I see it &#34; - Stranger Than Fiction</description>
	<lastBuildDate>Mon, 30 Aug 2010 07:37:53 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>YUI file upload with jsp backend</title>
		<link>http://www.nuwanbando.com/2009/07/yui-file-upload-with-jsp-backend/</link>
		<comments>http://www.nuwanbando.com/2009/07/yui-file-upload-with-jsp-backend/#comments</comments>
		<pubDate>Tue, 28 Jul 2009 16:51:29 +0000</pubDate>
		<dc:creator>Nuwan Bandara</dc:creator>
				<category><![CDATA[Java]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[YUI]]></category>

		<guid isPermaLink="false">http://www.nuwanbando.com/?p=147</guid>
		<description><![CDATA[For last two weeks I was working on some user interface logic and happened to use Yahoo UI library (YUI). The task was to upload an image using Ajax. Since I was new to YUI, I was looking here and there over the net for some references. There were some good ones but thats for [...]]]></description>
			<content:encoded><![CDATA[		<div style="float:right;margin:0px 0px 10px 10px;">
			<a class="DiggThisButton DiggMedium" href="http://digg.com/submit?url=http%3A%2F%2Fwww.nuwanbando.com%2F2009%2F07%2Fyui-file-upload-with-jsp-backend%2F&title=YUI+file+upload+with+jsp+backend&related=no" ><span style="display:none">For last two weeks I was working on some user interface logic and happened to use Yahoo UI library (YUI). The task was to upload an image using Ajax. Since I was new to YUI, I was looking here and there over the net for some references. There were some good ones but thats for [...]</span></a>		
		</div>		
		<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.nuwanbando.com%2F2009%2F07%2Fyui-file-upload-with-jsp-backend%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.nuwanbando.com%2F2009%2F07%2Fyui-file-upload-with-jsp-backend%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>For last two weeks I was working on some user interface logic and happened to use Yahoo UI library (<a href="http://developer.yahoo.com/yui/" target="_blank">YUI</a>). The task was to upload an image using Ajax. Since I was new to YUI, I was looking here and there over the net for some references. There were some good ones but thats for PHP back-ends, but mine was a jsp back-end and i didn&#8217;t know how to read the object thrown out from the YUI side.</p>
<p>with some more digging I came across nice file handling library in Apache commons (<a href="http://commons.apache.org/fileupload/using.html" target="_blank">Commons File Upload</a>) and took use of it to do the task. the code is as follows.</p>
<pre name="code" class="html">
<html>
<head>

<script type="text/javascript" src="[PATH_TO_YUI]/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="[PATH_TO_YUI]/connection/connection-min.js"></script>
<script type="text/javascript">
function init(){
  var onUploadButtonClick = function(e){
    //the second argument of setForm is crucial,
    //which tells Connection Manager this is a file upload form
    YAHOO.util.Connect.setForm('testForm', true);

    var uploadHandler = {
      upload: function(o) {
        alert(o.responseText);
      }
    };
  YAHOO.util.Connect.asyncRequest('POST', 'upload.php', uploadHandler);
  };
  YAHOO.util.Event.on('uploadButton', 'click', onUploadButtonClick);
}

YAHOO.util.Event.on(window, 'load', init);
</script>
</head>
<body>
<form action="upload.php" enctype="multipart/form-data" method="post" id="testForm">
<input type="text" id="test"/>
<input type="text" id="test-2"/>
<input type="text" id="test-3"/>
<input type="file" name="testFile"/>
<input type="button" id="uploadButton" value="Upload"/>
</form>

</body>
</html>
</pre>
<p>I took the above code segment directly from a <a href="http://thecodecentral.com/2007/09/04/asynchronous-file-upload-yuis-approach">YUI file upload tutorial</a> hence the credit goes to the author. The jsp back-end using apache commons file upload is as follows.<br />
<span id="more-147"></span></p>
<pre name="code" class="java">
if (ServletFileUpload.isMultipartContent(request)) {
	FileItemFactory factory = new DiskFileItemFactory();

	ServletFileUpload servletFileUpload = new ServletFileUpload(
					factory);
	List fileItemsList = servletFileUpload
					.parseRequest(request);

	String optionalFileName = "";
	FileItem fileItem = null;

	Iterator it = fileItemsList.iterator();

	while (it.hasNext()) {
		FileItem item = (FileItem) it.next();
		if (item.isFormField()) {
		//Other form values
			if (item.getFieldName().equals("test"))
				gName = item.getString();
			if (item.getFieldName().equals("test-2"))
				gUrl = item.getString();
			if (item.getFieldName().equals("test-3"))
				gDesc = item.getString();
		} else {
			contentType = item.getContentType();
			itemSizeInBytes = item.getSize();
			//any operation with the file goes here
		}

	}

}
</pre>
<p>So thats how it goes <img src='http://www.nuwanbando.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<div id="fb-root"></div>
       <script>
       window.fbAsyncInit = function() {
       FB.init({appId: "108492862525832", status: true, cookie: true,
             xfbml: true});
        };
     (function() {
      var e = document.createElement("script"); e.async = true;
     e.src = document.location.protocol +
       "//connect.facebook.net/en_US/all.js";
     document.getElementById("fb-root").appendChild(e);
   }());
   </script><div class = "fb-div"><fb:like href="http://www.nuwanbando.com/2009/07/yui-file-upload-with-jsp-backend/" layout="standard" show_faces="true" width="450" action="like" colorscheme="light" /></div>]]></content:encoded>
			<wfw:commentRss>http://www.nuwanbando.com/2009/07/yui-file-upload-with-jsp-backend/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
