- YUI IO can be used for asynchronous file uploading.
- YUI ‘io’, ‘io-form’,’io-upload-iframe’ modules are used for handling asynchronous request.
- The attribute that makes it asynchronous is upload: true.
- In Servlet Apache file upload library is used (commons-fileupload-1.1.1.jar, commons-io-2.4.jar) .
- The Download links are:-
http://commons.apache.org/fileupload/
http://commons.apache.org/io/download_io.cgi
http://yuilibrary.com/download/yui3/
Project Structure:-
- The demo file for upload is demo-upload-file.txt . It has a single text line “Hi this is the demo file content”.
- Project :-
Servlet For File Processing:-
- Here the File upload servlet is FileUploadServlet.java.
package com.sandeep.json.data.servlet;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
public class FileUploadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public FileUploadServlet() {
super();
}
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
}
@SuppressWarnings("unchecked")
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload fileUpload = new ServletFileUpload(factory);
List>FileItem< items = new ArrayList>FileItem<();
InputStream inputStream = null;
try {
items = fileUpload.parseRequest(request);
} catch (FileUploadException e) {
e.printStackTrace();
}
Iterator>FileItem< iter = items.iterator();
while (iter.hasNext()) {
FileItem fitem = (FileItem) iter.next();
if (!fitem.isFormField()) {
inputStream = fitem.getInputStream();
}
}
String contentOfFile = "";
try {
String line = "";
BufferedReader input = new BufferedReader(new InputStreamReader(
inputStream));
/** Reading the file */
while ((line = input.readLine()) != null) {
contentOfFile += line + "n";
}
} catch (Exception e) {
e.printStackTrace();
}
out.println(contentOfFile);
}
}
- The html code with yui code is (yui-io-file-upload-Demo.html):-
<!DOCTYPE html>
<html>
<head>
<title>YUI IO Queue (Ajax Request to Servlet)</title>
<script src="http://yui.yahooapis.com/3.8.0/build/yui/yui-min.js"></script>
<style>
.file-content {
color:green;
font-size: 20px;
font-style: italic;
}
</style>
</head>
<body class="yui3-skin-sam">
<form name="file-upload-form" id="file-upload-form">
<input type="file" name="uploadFile">
<input type="submit" class="upload-button" value="upload">
</form>
<ul id="ajax-status-appender"></ul>
<script>
YUI().use('io', 'io-queue', 'io-form', 'io-upload-iframe', function (Y) {
var configuration,
urifileupload = "http://localhost:8080/YUIAsyncFileUploadDemo/FileUploadServlet",
statusElement = Y.one("#ajax-status-appender"),
uploadForm = Y.one("#file-upload-form");
configuration = {
method: 'POST',
form: {
id: uploadForm,
upload: true
},
on: {
start: function (transactionid, arguments) {
statusElement.append("<li class='ajax-start-class'>START : upload started (no response arrived yet)</li>");
},
success: function (transactionid, response, arguments) {
statusElement.append("<li class='ajax-success-class'>SUCCESS : upload started, Response(Content of File) :<span class='file-content'> " + response.responseText + "</span></li>");
},
failure: function (transactionid, response, arguments) {
statusElement.append("<li class='ajax-failure-class'>FAILURE : upload failure, Response(Content of File) :<span class='file-content'> " + response.responseText + "</span></li>");
},
complete: function (transactionid, response, arguments) {
statusElement.append("<li class='ajax-complete-class'>COMPLETE : upload completed, Response(Content of File) :<span class='file-content'> " + response.responseText + "</span></li>");
},
end: function (transactionid, arguments) {
statusElement.append("<li class='ajax-end-class'>END : upload ended response completed</li>");
}
}
};
Y.one('.upload-button').on("click", function () {
Y.io(urifileupload, configuration);
});
});
</script>
</body>
</html>
- Html screen will look like,
- Firebug Inspection for this,
- Selecting a text file for upload,
- The servlet (FileUploadServlet) debug point shows that it receives the file,
- The Firebug inspection after submitting the form,
- The Output will look like,
START : upload started (no response arrived yet)
COMPLETE : upload completed, Response(Content of File) : Hi this is the demo file content
END : upload ended response completed
