Announcement Announcement Module
Collapse
No announcement yet.
File Upload Progress Bar Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • #16
    Thanks for Posting Code

    Dear rsilviu,

    Many Thanks for posting code, and I able to impliment prograssbar sucessfully being a new comer in Spring...

    -Subin

    Comment


    • #17
      More Problems with this code....

      Hello everyone,

      Thanks dawez for the advice. I have actually removed the message labels and replaced them with fixed text for now, and this has resolved my issue for now.

      I would like to point out that I have not been able to make this code run in my application exactly as rsilviu posted. I had 4 major issues with the code posted.

      Problem 1.
      I could not get the MultipartResolver from the request, to add the ProgressListener to it. If I created a new MultipartResolver from my controller (declaring and creating new instance in my Java source), then the application ended up with two MultipartResolver instances. The problem was that the original one from the -servlet.xml file was actually intercepting and consuming (parsing) the request, which caused the second instance to return an empty file list.
      I have now solved this.... please read bellow.

      Problem 2.
      The ProgressListener.getStatus() method always returned 0 for all stats. (Probably because it was not assigned to the Appropriate MultipartResolver).
      (I have also now solved this... please read bellow)

      Problem 3.
      Could not get the spring-servlet.xml file to accept the DWR references. Found that you need to remove the DTD declaration from the top, and add the appropriate xmlns: and xsi:schemaLocation parameters on the <beans> openning tag.

      Code:
      <beans xmlns="http://www.springframework.org/schema/beans" 
        		 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        		 xmlns:aop="http://www.springframework.org/schema/aop"
        		 xmlns:dwr="http://www.directwebremoting.org/schema/spring-dwr"
        		 xsi:schemaLocation=
        		 	"http://www.springframework.org/schema/beans
        		 	 http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
        		 	 http://www.springframework.org/schema/aop 
        		 	 http://www.springframework.org/schema/aop/spring-aop-2.5.xsd
        		 	 http://www.directwebremoting.org/schema/spring-dwr 
        		 	 http://www.directwebremoting.org/schema/spring-dwr-2.0.xsd">
      Problem 4.
      When uploading from the same client through different browser windows, or through the same browser but different tabs and for different file uploads, to the server, the progress bar detail jumps back and forth between the two uploads. I.e. the same listener is handling both multipart uploads, which is not good....
      still unresolved...!!!

      These are the steps I have taken so far to resolve these issues.
      1) Assign a property of type "progressListener" to my MultiPartResolver in the -servlet.xml and reference the actual ProgressListener bean to it like this.
      Code:
          <bean id="multipartResolver"
                class="web.RoutesMultipartResolver">
              <!-- one of the properties available; the maximum file size in bytes -->
              <property name="progressListener"
              		  ref="routesProgressListener" />
          </bean>
      This way, I did not need to add any additional code to my controller, to make the progress bar work. I attach my code here, just in case it helps anyone else. Again many thanks to rsilviu for his code. This has been an excellent example for DWR with Spring MVC.

      First the web.xml file
      Code:
      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE web-app PUBLIC 
        '-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN' 
        'http://java.sun.com/dtd/web-app_2_3.dtd'>
      
        <web-app>
        	<servlet>
      	    <servlet-name>MediaStreamer</servlet-name>
      		<servlet-class>
      			org.springframework.web.servlet.DispatcherServlet
      		</servlet-class>
      		<load-on-startup>1</load-on-startup>
      	</servlet>
              
              .............Other necessary servlet mappings for my app............
      	
      	<servlet-mapping>
      		<servlet-name>MediaStreamer</servlet-name>
      		<url-pattern>/dwr/*</url-pattern>
      	</servlet-mapping>
              
              .............Other necessary code for taglibs etc. for my app...........
      
        </web-app>
      Then the application-servlet.xml file

      Code:
      <?xml version="1.0" encoding="UTF-8"?>
        <beans xmlns="http://www.springframework.org/schema/beans" 
        		 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        		 xmlns:aop="http://www.springframework.org/schema/aop"
        		 xmlns:dwr="http://www.directwebremoting.org/schema/spring-dwr"
        		 xsi:schemaLocation=
        		 	"http://www.springframework.org/schema/beans
        		 	 http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
        		 	 http://www.springframework.org/schema/aop 
        		 	 http://www.springframework.org/schema/aop/spring-aop-2.5.xsd
        		 	 http://www.directwebremoting.org/schema/spring-dwr 
        		 	 http://www.directwebremoting.org/schema/spring-dwr-2.0.xsd">
        
        	<dwr:controller id="dwrController" debug="false" />
        	<dwr:configuration>
        		<dwr:convert type="bean" class="web.UploadInfoBean"/>
       	</dwr:configuration>
        
         
        	<bean id="dwrUrlMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
        		<property name="alwaysUseFullPath" value="true"/>
        		<property name="mappings">
        			<value>
        				/dwr/**/*=dwrController
        			</value>
        		</property>
        	</bean>
        
        	<bean id="routesProgressListener" 
        			class="web.RoutesProgressListener"  scope="session">
        	<aop:scoped-proxy/>
        		<dwr:remote javascript="RoutesProgressListener">
        			<dwr:include method="getStatus"/>
        		</dwr:remote>
        	</bean>
        
        	<bean id="multipartResolver"
                class="web.RoutesMultipartResolver">
              <!-- one of the properties available; the maximum file size in bytes -->
              <property name="progressListener"
              		  ref="routesProgressListener" />
          </bean>
        	
        	<bean id="bbMedStreamerController" 
                class="web.BbMedStreamerController">
          	<property name="mnr" 
          	          ref="submitParameterPropertiesMethodNameResolver"/>
          	    	
          	<property name="sessionForm">
          	  <value>true</value>
          	</property>
          	<property name ="commandClass">
          	  <value>
          	    bus.UploadMediaForm
          	  </value>
          	</property>
          	<property name="formView">
          	  <value>uploadNew</value>
          	</property>
          	<property name="successView">
          	  <value>submittedSuccess</value>
          	</property>
          </bean>
          
          <bean id="submitParameterPropertiesMethodNameResolver"
                class="bus.SubmitParameterPropertiesMethodNameResolver">
              <property name = "mappings">
                <props>
                  <prop key ="_addMedia">addMedia</prop>
                  <prop key ="_editMedia">edditMedia</prop>
                </props>
              </property>    
          </bean>
          
          <!-- Not Used for Now!!!  
          <bean id="actionResolver" 
                class="org.springframework.web.servlet.mvc.multiaction.ParameterMethodNameResolver">
            <property name="paramName">
              <value>action</value>
            </property>
          </bean>
          -->
          
          <bean id="urlMapping"
      		class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
      		<property name="mappings">
      			<props>
      				<prop key="/upload.form">bbMedStreamerController</prop>
      			</props>
      		</property>
      	</bean>
      
      	<!-- This view resolver works with the views.properties file -->
      	<bean id="viewResolver"
      		class="org.springframework.web.servlet.view.ResourceBundleViewResolver">
      		<property name="basename">
      			<value>views</value>
      		</property>
      	</bean>
      	
      	<!--  
      		<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
      		<property name="viewClass">
      		<value>org.springframework.web.servlet.view.JstlView</value>
      		</property>
      		
      		<property name="prefix">
      		<value>/WEB-INF/jsp/</value>
      		</property>
      		
      		<property name="suffix">
      		<value>.jsp</value>
      		</property>
      		</bean>
      	-->
        </beans>
      I would appreciate any feedback on how to resolve Problem4.

      Again thanks for the help.

      Kind regards -
      Last edited by ta6hbe; Jun 8th, 2010, 10:15 AM.

      Comment


      • #18
        I realize this post is old, but I'm trying to accomplish the same thing with file upload and progress tracking and I should point out that uploading a file using a GET request just so you can get a request parameter is BAD.

        GET requests are limited in size based on browser and exceeding these limits may cause non-deterministic behavior.

        Comment


        • #19
          Does this technique only work using an XHR upload? The reason I ask is I have it almost working without it but have reached a dead-end.

          Server-side is all good, but client-side my showStatus callback is never called by DWR, when it is supposed to be called periodically. queryStatus is called once from onsubmit, but showStatus never gets called by DWR so I never see any progress client-side. The upload then completes and my page refreshes.

          My understanding is that it has to go via XHR? If this is the case I wanted to ask if anyone has achieved a progress monitor with Spring and Spring JS (i.e. Dojo)

          Comment


          • #20
            IIRC, in order to do file uploading via ajax, you will need to use forms or iframes. i don't know about dojo, but jQuery has gobs of plugins that do this already and i suspect dojo does as well.

            if your callbacks are not getting it, i would try to implement every callback to see if ANY are getting hit, but since your page is reloading, it sounds like you're not actually uploading via AJAX unless you have a location.reload() call somewhere.

            Comment


            • #21
              I fond this solution, works for me:

              http://abambenjamin.blogspot.mx/2012...ar-spring.html

              Comment


              • #22
                Always progress bar is showing 99%

                Originally posted by rsilviu View Post
                I succeeded implementing the file upload progress bar in my application with spring webflow and dwr.
                I dind't find a quick and usable example on this forum so I'll explain what I did to work maybe someone will need it.
                First I created a bean to keep the status of the upload:


                public class UploadInfoBean {
                private long totalSize = 0;
                private long bytesRead = 0;
                private int percentage = 0;

                public int getPercentage() {
                return percentage;
                }
                public void setPercentage(int percentage) {
                this.percentage = percentage;
                }

                public long getTotalSize() {
                return totalSize;
                }
                public void setTotalSize(long totalSize) {
                this.totalSize = totalSize;
                }
                public long getBytesRead() {
                return bytesRead;
                }
                public void setBytesRead(long bytesRead) {
                this.bytesRead = bytesRead;
                }
                }

                After that I implemented a listener to add to the multipartResolver and to call from client javascript to retrieve the upload status:

                import java.text.NumberFormat;
                import org.apache.commons.fileupload.ProgressListener;
                import ro.theredpoint.routes.iris.beans.UploadInfoBean;

                public class RoutesProgressListener implements ProgressListener {

                private static long bytesTransferred = 0;
                private static long fileSize = -100;
                private long totalBytesRead = 0;
                private long fiveKBRead = -1;
                private UploadInfoBean uploadInfoBean = null;

                public RoutesProgressListener() {
                uploadInfoBean = new UploadInfoBean();
                }

                //function called from javascript to retrive the status of the upload
                public UploadInfoBean getStatus() {
                // per looks like 0% - 100%, remove % before submission
                uploadInfoBean.setTotalSize(fileSize/1024);
                uploadInfoBean.setBytesRead(totalBytesRead/1024);
                String per = NumberFormat.getPercentInstance().format((double) bytesTransferred / (double) fileSize);
                uploadInfoBean.setPercentage(Integer.parseInt(per. substring(0, per.length() - 1)));
                return uploadInfoBean;
                }

                //function called by multipartResolver to notify the change of the upload status
                public void update(long bytesRead, long contentLength, int items) {
                // update bytesTransferred and fileSize (if required) every 5 KB is read
                long fiveKB = bytesRead / 5120;
                totalBytesRead = bytesRead;
                if (fiveKBRead == fiveKB) {
                return;
                }
                fiveKBRead = fiveKB;
                bytesTransferred = bytesRead;
                if (fileSize != contentLength) {
                fileSize = contentLength;
                }
                }
                }

                After that I extended the CommonsMultipartResolver to add the listener:


                import java.util.List;
                import javax.servlet.http.HttpServletRequest;
                import org.apache.commons.fileupload.FileUpload;
                import org.apache.commons.fileupload.FileUploadBase;
                import org.apache.commons.fileupload.FileUploadException;
                import org.apache.commons.fileupload.ProgressListener;
                import org.apache.commons.fileupload.servlet.ServletFileU pload;
                import org.springframework.web.multipart.MaxUploadSizeExc eededException;
                import org.springframework.web.multipart.MultipartExcepti on;
                import org.springframework.web.multipart.MultipartHttpSer vletRequest;
                import org.springframework.web.multipart.commons.CommonsM ultipartResolver;
                import org.springframework.web.multipart.support.DefaultM ultipartHttpServletRequest;

                public class RoutesMultipartResolver extends CommonsMultipartResolver {

                private ProgressListener progressListener;
                public void setProgressListener(ProgressListener progressListener) {
                this.progressListener = progressListener;
                }

                public MultipartHttpServletRequest resolveMultipart(HttpServletRequest request) throws MultipartException {
                String encoding = determineEncoding(request);
                FileUpload fileUpload = prepareFileUpload(encoding);
                if (progressListener != null){
                fileUpload.setProgressListener(progressListener);
                }
                try {
                List fileItems = ((ServletFileUpload) fileUpload).parseRequest(request);
                MultipartParsingResult parsingResult = parseFileItems(fileItems, encoding);
                return new DefaultMultipartHttpServletRequest(
                request, parsingResult.getMultipartFiles(), parsingResult.getMultipartParameters());
                }
                catch (FileUploadBase.SizeLimitExceededException ex) {
                throw new MaxUploadSizeExceededException(fileUpload.getSizeM ax(), ex);
                }
                catch (FileUploadException ex) {
                throw new MultipartException("Could not parse multipart servlet request", ex);
                }
                }
                }

                In web.xml I mapped DispatcherServlet to dwr calls:

                <servlet-mapping>
                <servlet-name>routes</servlet-name>
                <url-pattern>/dwr/*</url-pattern>
                </servlet-mapping>

                In *-servlet.xml I defined dwr controller and exposed needed methods from the bean:

                <dwr:controller id="dwrController" debug="false" />
                <dwr:configuration>
                <dwr:convert type="bean" class="ro.theredpoint.routes.iris.beans.UploadInfo Bean"/>
                </dwr:configuration>
                <bean id="dwrUrlMapping" class="org.springframework.web.servlet.handler.Sim pleUrlHandlerMapping">
                <property name="alwaysUseFullPath" value="true"/>
                <property name="mappings">
                <value>
                /dwr/**/*=dwrController
                </value>
                </property>
                </bean>
                .................................................. ......
                <bean id="routesProgressListener" class="ro.theredpoint.routes.multipartUpload.Route sProgressListener"
                scope="session" >
                <aop:scoped-proxy/>
                <dwr:remote javascript="RoutesProgressListener">
                <dwr:include method="getStatus"/>
                </dwr:remote>
                </bean>


                I made a javaScript file for progress change:

                function queryStatus() {
                RoutesProgressListener.getStatus(showStatus);
                return true;
                }
                function showStatus(status) {
                if (status.percentage == "100"){
                document.getElementById("progressBarText").style.v isibility = 'hidden';
                document.getElementById("progressBarSuccesfull").s tyle.visibility = 'visible';
                document.getElementById("progressBarBoxContent").s tyle.width = parseInt(status.percentage * 4) + "px";
                } else {
                document.getElementById("progressBarSuccesfull").s tyle.visibility = 'hidden';
                document.getElementById("progressBar").style.displ ay = "block";
                document.getElementById("percentage").innerHTML= ' ' + status.percentage;
                document.getElementById("bytesRead").innerHTML= ' ' + status.bytesRead;
                document.getElementById("totalSize").innerHTML= ' ' + status.totalSize;
                document.getElementById("progressBarBoxContent").s tyle.width = parseInt(status.percentage * 4) + "px";
                setTimeout(queryStatus, 500);
                }
                return true;
                }

                and the required css file:

                #progressBar {
                padding-top: 5px;
                padding-left: 45px;
                }

                #progressBarText {
                text-align: center;
                margin-left: auto;
                margin-right: auto;
                color: #969696;
                padding-left: 5px;
                }

                #progressBarBox {
                width: 400px;
                height: 20px;
                border: 0px;
                border-style: solid;
                background-color: white;
                margin-left: auto;
                margin-right: auto;
                }

                #progressBarBoxContent {
                background-color: #969696;
                height: 20px;
                }

                #progressBarSuccesfull {
                text-align: center;
                margin-left: auto;
                margin-right: auto;
                color: #969696;
                padding-left: 5px;
                }

                in my jsp file I imported the required js and css:

                <style media="all" type="text/css">
                @import url("css/progressUpload.css");
                </style>
                <script type='text/javascript' src='/routes-web/dwr/engine.js'> </script>
                <script type='text/javascript' src='/routes-web/dwr/util.js'> </script>
                <script type='text/javascript' src='/routes-web/dwr/interface/RoutesProgressListener.js'></script>

                On my form I added:

                <form:form name="submitFileForm" commandName="submitFile" method="post" enctype="multipart/form-data" onsubmit="setTimeout('queryStatus()', 200);">


                and the div with progressBar:

                <div id="progressBar" style="display: none;">
                <div id="progressBarBox">
                <div id="progressBarBoxContent"></div>
                <div id="progressBarText">
                <spring:message code="progressBarTransferLabel"/>
                <span id="percentage"></span>
                <spring:message code="progressBarProcentLabel"/>
                <spring:message code="progressBarTransferSizeLabel"/>
                <span id="bytesRead"></span>
                <spring:message code="progressBarMetricUnitLabel"/>
                <spring:message code="progressBarFromLabel"/>
                <span id="totalSize"></span>
                <spring:message code="progressBarMetricUnitLabel"/>;
                </div>
                <div id="progressBarSuccesfull">
                <spring:message code="progressBarTextSuccessLabel"/></div>
                </div>
                </div>

                I hope this will help anyone to implement a progress Bar in less time that I did. It toked me two days to make it work.
                If someone has remarks about what I did or has ideas on how to improve this please reply to this post. I hope you understand my text because I didn't know how to format it better with scroll bars as above.
                I did same implementation it is working fine. But always % is showing 99%.
                I implemented in spring web flow with weblogic portal.
                some body please help me to resolve the issue

                Comment


                • #23
                  svs_mohan Have a look here:

                  http://forum.springsource.org/showth...108#post211108

                  I also had the problem where the bar was stuck at 99%

                  Hope that it would help.
                  Last edited by dawez; Mar 5th, 2013, 08:02 PM. Reason: removing url

                  Comment


                  • #24
                    My problem is not stuck at 99% always displying 99%. From the begning 99%

                    first FileuploadMultipartResolver calling update and javascript calling getstatus() after finishing update() this is my problem.
                    Please help me in resolving the issue

                    webflow-config.xml
                    <bean id="portletMultipartResolver" class="com.pge.cfs.cco.service.uploadFile.Fileuplo adMultipartResolver">
                    </bean>

                    fileupload-progressbar-servlet.xml

                    <beans xmlns="http://www.springframework.org/schema/beans"
                    xmlns:aop="http://www.springframework.org/schema/aop"
                    xmlns:dwr="http://www.directwebremoting.org/schema/spring-dwr"
                    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schem...-beans-3.0.xsd
                    http://www.springframework.org/schema/aop http://www.springframework.org/schem...ng-aop-3.0.xsd
                    http://www.directwebremoting.org/schema/spring-dwr http://www.directwebremoting.org/schema/spring-dwr-3.0.xsd">

                    <dwr:controller id="dwrController" debug="false"/>

                    <bean class="org.springframework.web.servlet.handler.Sim pleUrlHandlerMapping">
                    <property name="alwaysUseFullPath" value="true"/>
                    <property name="mappings">
                    <props>
                    <prop key="/dwr/**/*">dwrController</prop>
                    </props>
                    </property>
                    </bean>

                    <dwr:configuration>
                    <dwr:convert type="bean" class="com.pge.cfs.cco.service.uploadFile.UploadIn foBean"/>
                    </dwr:configuration>

                    <bean id="fileuploadProgressListener" class="com.pge.cfs.cco.service.uploadFile.Fileuplo adProgressListener" scope="session">
                    <!-- <constructor-arg name="request"><value>javax.portlet.ActionRequest</value></constructor-arg> -->
                    <!-- <property name="requestAction" value="javax.portlet.ActionRequest"/> -->
                    <aop:scoped-proxy/>
                    <dwr:remote javascript="FileuploadProgressListener">
                    <dwr:include method="getStatus"/>
                    </dwr:remote>
                    </bean>
                    </beans>

                    web.xml

                    <servlet>
                    <servlet-name>fileupload-progressbar</servlet-name>
                    <servlet-class>org.springframework.web.servlet.DispatcherSe rvlet</servlet-class>
                    <load-on-startup>1</load-on-startup>
                    </servlet>
                    <servlet-mapping>
                    <servlet-name>fileupload-progressbar</servlet-name>
                    <url-pattern>/dwr/*</url-pattern>
                    </servlet-mapping> -->
                    <servlet>

                    Comment


                    • #27
                      public class RoutesProgressListener implements ProgressListener {

                      private static long bytesTransferred = 0;
                      private static long fileSize = -100;


                      in the above class bytesTransferred and fileSize variables are static . These variables won't create any problem? like one user values to goes to another user. Please clarify me about this

                      Comment

                      Working...
                      X