Dojo File Upload ProgressBar - Java Servlet

Dojo File Upload Progress Bar Widget Upload.jsp contiene un form "multipart/form-data" para subir archives al sevlet "test" indicado en el Web.xml. Ademas de tener un barra de progreso que mide el porcentaje de subida usando org.apache.commons.fileupload.ProgressListener la sincronización de la subida de archivo se realiza con dojo.xhrGet llamando el sevlet progress. <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>SuperLink</title> <style type="text/css"> @import "js/dojotoolkit/dijit/themes/tundra/tundra.css"; @import "js/dojotoolkit/dijit/themes/nihilo/soria.css"; @import "js/dojotoolkit/dijit/themes/dijit.css"; @import "js/dojotoolkit/dijit/themes/nihilo/nihilo.css"; @import "js/dojotoolkit/dojo/resources/dojo.css" </style> <script type="text/javascript" src="js/dojotoolkit/dojo/dojo.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript" src="js/jsonrpc.js"></script> </script> <script type="text/javascript"> dojo.require("dijit.ProgressBar"); dojo.require("dijit.form.ComboBox"); dojo.require("dijit.form.DateTextBox"); dojo.require("dojo.parser"); dojo.require("dijit.form.FilteringSelect"); dojo.require("dijit.form.Button"); dojo.require("dijit.form.ComboBox"); dojo.require("dijit.layout.SplitContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.form.ComboBox"); dojo.require("dojo.data.ItemFileReadStore"); dojo.require("dijit.form.TextBox"); dojo.require("dojo.io.iframe"); dojo.require("dijit.Tooltip"); dojo.require("dijit.layout.TabContainer"); dojo.require("dijit.layout.ContentPane"); dojo.addOnLoad(function(){ dijit.byId('downloadProgress').domNode.style.display = "none"; var StoreMes = new dojo.data.ItemFileReadStore({url: "http://localhost:9080/SidAjax/util/mes.json"}); var selectMes = new dijit.form.ComboBox({id: "mes", name: "mes", value: "Enero", store: StoreMes, searchAttr: "name"}, "mes"); var StoreAnios = new dojo.data.ItemFileReadStore({url: "http://localhost:9080/SidAjax/util/anios.json"}); var selectAnios = new dijit.form.ComboBox({id: "anios", name: "anio", value: "2009", store: StoreAnios, searchAttr: "name"}, "anios"); var StorePais = new dojo.data.ItemFileReadStore({url: "http://localhost:9080/SidAjax/util/paises.json"}); var selectPais = new dijit.form.ComboBox({id: "pais", name: "pais", value: "Peru", store: StorePais, searchAttr: "name"}, "pais"); var StoreCats = new dojo.data.ItemFileReadStore({url: "http://localhost:9080/SidAjax/util/cats.json"}); var selectCats = new dijit.form.ComboBox({id: "cats", name: "cats", value: "Desplazamiento", store: StoreCats, searchAttr: "name"}, "cats"); }); var load=0; var upload=false; function doProgress() { dijit.byId('downloadProgress').domNode.style.display = "block"; //dijit.byId('submitButton').domNode.style.display = "none"; jsProgress.update({ maximum: 100, progress: 0 }); doProgressLoop(); } function doProgressLoop() { if (load < 100 ) {

getProgress(); setTimeout("jsProgress.update({ progress: " + load + " })", (load+1)*50 + Math.floor(Math.random()*100)); setTimeout("doProgressLoop()", 700); if(upload){ killProgress(); load=100; dijit.byId("submitButton").enabled='true'; } }else{ jsProgress.update({ progress: 100 }); dijit.byId('downloadProgress').domNode.style.display = "none"; dijit.byId("submitButton").disabled='false'; //dijit.byId('submitButton').domNode.style.display = "block"; } } function getProgress() { if(load<100){ dojo.xhrGet({url: 'progress', handleAs: "text", load: function (data) { if(data==100){ load=100; }else if(data<100){ load=data; } //dojo.byId('response').innerHTML = load; }, error: function (data) { //dojo.byId('response').innerHTML = "Error retrieving progress"+data; } }); } } function killProgress() { if(load<100){ dojo.xhrGet({url: 'killprogress', handleAs: "text", load: function (data) { //dojo.byId('response').innerHTML = "killed progres"; }, error: function (data) { //dojo.byId('response').innerHTML = "Error retrieving progress"+data; } }); } } function sendForm(){ var button = dijit.byId("submitButton"); dojo.connect(button, "onClick", function(event){ button.disabled='true'; event.preventDefault(); event.stopPropagation(); var xhrArgs = { form: dojo.byId("myform"), handleAs: "html", method: 'POST', contentType: "multipart/form-data", load: function(data){ //dojo.byId("response").innerHTML = "Archivo Subido OK."+ data; //dijit.byId("submitButton").disabled='false'; upload=true; }, error: function(error){ //dojo.byId("response").innerHTML = "Error al subir archivo."; } } var deferred = dojo.io.iframe.send(xhrArgs); doProgress(); dojo.byId("response").innerHTML = "fue enviado..." }); } dojo.addOnLoad(sendForm); </script> </head> <body class="tundra"> <div style="height: 105px;"> <div dojoType="dijit.layout.TabContainer" style="width: 100%;" doLayout="false"> <div dojoType="dijit.layout.ContentPane" title="Zona SuperLink" selected="true"> <blockquote> <div> <form name="form1" id="myform" action="test" enctype="multipart/form-data"> <input id="mes" style="width: 120px"> <input id="anios" style="width: 120px;"> <input id="pais" style="width: 120px;"> <br> <input id="cats" style="width: 120px;"> <input id="q01" type="text" name="nombre" style="width: 170px;" dojoType="dijit.form.ValidationTextBox" required="true" invalidMessage="Ingresar nombre del Archivo!"/> <input type="file" size="50" name="file1"> <button type="submit" dojoType="dijit.form.Button" id="submitButton">Cargar</button> </form> <div class="tundra"><div dojoType="dijit.ProgressBar" style="width: 300px" jsId="jsProgress" id="downloadProgress"> </div></div> </div> </blockquote> <div dojoType="dijit.Tooltip" connectId="q01" position="['above']"> Ingresar nombre del Archivo </div>  </div> <div dojoType="dijit.layout.ContentPane" title="Zona Descarga"> aaaaaaaaaaaaaaaaaaa <br /> <br /> <br /> dddddddddddddddddd </div>

</div>  </div> </body> </html> Servlet TestServlet: Encargado de recibir los archives enviados desde el upload.jsp. además de crear una sesión de donde setea TestProgressListener que se encarga de monitorear el File Upload. package test; import java.io.IOException; import java.io.PrintWriter; import java.util.Iterator; import java.util.List; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.FileItemFactory; import org.apache.commons.fileupload.FileUploadException; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; public class TestServlet extends HttpServlet { private static final long serialVersionUID = 1L; // public static final long MAX_UPLOAD_IN_MEGS = 50; public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException { response.setContentType("text/html"); response.setHeader("Cache-Control", "no-cache"); PrintWriter out = response.getWriter(); boolean isMultipartContent = ServletFileUpload.isMultipartContent(request); if (!isMultipartContent) { System.out.println("You are not trying to upload "); return; } FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); //upload.setSizeMax(MAX_UPLOAD_IN_MEGS * 1024 * 1024); TestProgressListener testProgressListener = new TestProgressListener(); upload.setProgressListener(testProgressListener); HttpSession session = request.getSession(); session.setAttribute("testProgressListener", testProgressListener);

try { System.out.println("Inicio de Carga"); List fields = upload.parseRequest(request); Iterator it = fields.iterator(); if (!it.hasNext()) { System.out.println("No fields found " + fields.size() ); return; } while (it.hasNext()) { FileItem fileItem = (FileItem)it.next(); boolean isFormField = fileItem.isFormField(); if (isFormField) { System.out.println("FieldName :"+fileItem.getFieldName()+" Valor:"+fileItem.getString()); } else { System.out.println("FieldName :"+fileItem.getFieldName()+" name "+fileItem.getName() +" "+fileItem.getContentType() +" "+fileItem.getSize() +" Valor:"+fileItem.getSize() + " archivo "+fileItem.toString()); } } //session.removeAttribute("testProgressListener"); out.print("Archivo subido"); System.out.println("Carga Finalizada"); } catch (FileUploadException e) { System.out.println("e "+ e.getMessage()); e.printStackTrace(); } } }

TestProgressListener : Clase de Monitoreo que permite medir el progreso de la sibida de archivos package test; import org.apache.commons.fileupload.ProgressListener; public class TestProgressListener implements ProgressListener { private long num100Ks = 0; private long theBytesRead = 0; private long theContentLength = -1; private int whichItem = 0; private int percentDone = 0; private boolean contentLengthKnown = false; public void update(long bytesRead, long contentLength, int items) { if (contentLength > -1) { contentLengthKnown = true; } theBytesRead = bytesRead; theContentLength = contentLength; whichItem = items; long nowNum100Ks = bytesRead / 100000; // Only run this code once every 100K if (nowNum100Ks > num100Ks) { num100Ks = nowNum100Ks; if (contentLengthKnown) { percentDone = (int) Math.round(100.00 * bytesRead / contentLength); } //System.out.println("getMessage() : "+getMessage()); } } public String getMessage() { if (theContentLength == -1) { return "" + theBytesRead + " of Unknown-Total bytes have been read."; } else { return "" + theBytesRead + " de " + theContentLength + " bytes se han subido(" + percentDone + "% )."; } } public long getNum100Ks() { return num100Ks; } public void setNum100Ks(long num100Ks) { this.num100Ks = num100Ks; }

public long getTheBytesRead() { return theBytesRead; } public void setTheBytesRead(long theBytesRead) { this.theBytesRead = theBytesRead; } public long getTheContentLength() { return theContentLength; } public void setTheContentLength(long theContentLength) { this.theContentLength = theContentLength; } public int getWhichItem() { return whichItem; } public void setWhichItem(int whichItem) { this.whichItem = whichItem; } public int getPercentDone() { return percentDone; } public void setPercentDone(int percentDone) { this.percentDone = percentDone; } public boolean isContentLengthKnown() { return contentLengthKnown; } public void setContentLengthKnown(boolean contentLengthKnown) { this.contentLengthKnown = contentLengthKnown; } }

ProgressServlet: clase que obtiene TestProgressListener de una sesión creada en el ServletTest, este servlet proporciona el estado de progreso de la subida de archivo package test; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; public class ProgressServlet extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException { response.setContentType("text/html"); response.setHeader("Cache-Control", "no-cache"); PrintWriter out = response.getWriter(); HttpSession session = request.getSession(true); if (session == null) { out.println("Sorry, session is null"); // just to be safe return; } TestProgressListener testProgressListener = (TestProgressListener) session.getAttribute("testProgressListener"); if (testProgressListener == null) { out.println("Progress listener is null"); return; } out.println(testProgressListener.getPercentDone()); } }

KillProgressServlet: Clase que se usa para eliminar la session que guarda el estado de la subida de archivos, esta clase es invocada cuando el progreso de la subida de archivo llega al 100%. package test; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; public class KillProgressServlet extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException { response.setContentType("text/html"); response.setHeader("Cache-Control", "no-cache"); PrintWriter out = response.getWriter(); HttpSession session = request.getSession(true); TestProgressListener testProgressListener = (TestProgressListener) session.getAttribute("testProgressListener"); if (testProgressListener != null) { session.removeAttribute("testProgressListener"); System.out.println("remove session"); return; } } }

<?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <display-name> SidAjax</display-name> <servlet> <servlet-name>action</servlet-name> <servlet-class> org.apache.struts.action.ActionServlet</servlet-class> <init-param> <param-name>config</param-name> <param-value>/WEB-INF/struts-config.xml</param-value> </init-param> <init-param> <param-name>debug</param-name> <param-value>2</param-value> </init-param> <init-param> <param-name>detail</param-name> <param-value>2</param-value> </init-param> <init-param> <param-name>validate</param-name> <param-value>true</param-value> </init-param> <load-on-startup>2</load-on-startup> </servlet> <servlet> <description> </description> <display-name> com.metaparadigm.jsonrpc.JSONRPCServlet</display-name> <servlet-name>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-name> <servlet-class> com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>action</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-name> <url-pattern>/JSON-RPC</url-pattern> </servlet-mapping> <servlet> <servlet-name>ImagenServlet</servlet-name> <servlet-class>sidajax.servlet.ImagenServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ImagenServlet</servlet-name> <url-pattern>/ImagenServlet</url-pattern> </servlet-mapping> <servlet> <servlet-name>TestServlet</servlet-name> <servlet-class>test.TestServlet</servlet-class> </servlet> <servlet> <servlet-name>ProgressServlet</servlet-name> <servlet-class>test.ProgressServlet</servlet-class> </servlet> <servlet> <servlet-name>KillProgressServlet</servlet-name> <servlet-class>test.KillProgressServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>TestServlet</servlet-name> <url-pattern>/test</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>ProgressServlet</servlet-name> <url-pattern>/progress</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>KillProgressServlet</servlet-name> <url-pattern>/killprogress</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> <jsp-config> <taglib> <taglib-uri>/WEB-INF/struts-bean.tld</taglib-uri> <taglib-location>/WEB-INF/struts-bean.tld</taglib-location> </taglib> <taglib> <taglib-uri>/WEB-INF/struts-html.tld</taglib-uri> <taglib-location>/WEB-INF/struts-html.tld</taglib-location> </taglib> <taglib> <taglib-uri>/WEB-INF/struts-logic.tld</taglib-uri> <taglib-location>/WEB-INF/struts-logic.tld</taglib-location> </taglib> <taglib> <taglib-uri>/WEB-INF/struts-nested.tld</taglib-uri> <taglib-location>/WEB-INF/struts-nested.tld</taglib-location> </taglib> <taglib> <taglib-uri>/WEB-INF/struts-template.tld</taglib-uri> <taglib-location>/WEB-INF/struts-template.tld</taglib-location> </taglib> <taglib> <taglib-uri>/WEB-INF/struts-tiles.tld</taglib-uri> <taglib-location>/WEB-INF/struts-tiles.tld</taglib-location> </taglib> </jsp-config> </web-app>

Dojo File Upload ProgressBar - Java Servlet

1 comments

Notes on slide 1

6 Favorites