<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body link="#355491" alink="#4262a1" vlink="#355491" style="background: #e2e2e2; margin: 0; padding: 20px;">
<div>
<table cellpadding="0" bgcolor="#FFFFFF" border="0" cellspacing="0" style="border: 1px solid #dadada; margin-bottom: 30px; width: 100%; -moz-border-radius: 6px; -webkit-border-radius: 6px;">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border: solid 2px #ccc; background: #dadada; width: 100%; -moz-border-radius: 6px; -webkit-border-radius: 6px;">
<tbody>
<tr>
<td bgcolor="#000000" valign="middle" height="58px" style="border-bottom: 1px solid #ccc; padding: 20px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px;">
<h1 style="color: #333333; font: bold 22px Arial, Helvetica, sans-serif; margin: 0; display: block !important;">
<!-- To have a header image/logo replace the name below with your img tag -->
<!-- Email clients will render the images when the message is read so any image -->
<!-- must be made available on a public server, so that all recipients can load the image. -->
<a href="http://community.jboss.org/index.jspa" style="text-decoration: none; color: #E1E1E1">JBoss Community</a></h1>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" style="font: normal 12px Arial, Helvetica, sans-serif; color:#333333; padding: 20px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px;"><h3 style="margin: 10px 0 5px; font-size: 17px; font-weight: normal;">
apache.commons.fileupload - Browser blocks ajax requests
</h3>
<span style="margin-bottom: 10px;">
created by <a href="http://community.jboss.org/people/t_guen03">t_guen03</a> in <i>JBoss Web Development</i> - <a href="http://community.jboss.org/message/590187#590187">View the full discussion</a>
</span>
<hr style="margin: 20px 0; border: none; background-color: #dadada; height: 1px;">
<div class="jive-rendered-content"><p>Hi,</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>its my first post here so far, I hope I do not ask this question in the wrong place. I hope you can help me with my problem.</p><p>I want to have a progressbar at my page, which displays the status of a fileupload.</p><p>Therefore I got a <h:form>-tag like this :</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><pre class="jive-pre"><code class="jive-code jive-xml"><span class="jive-xml-tag"><h:form id="uploadForm" target="iframe"
            enctype="multipart/form-data"></span>
            <span class="jive-xml-tag"><h:outputLabel
                styleClass="label" value="Select File"/></span>
                    <span class="jive-xml-tag"><div class="round"></span><span class="jive-xml-tag"><input name="file" type="file"/></span><span class="jive-xml-tag"></div></span>
            <span class="jive-xml-tag"><h:commandButton name="upload" id="uploadbt"
                action="#{uploadBean.upload}" value="Upload"
                onclick="startPolling('uploadForm');"></span>
                <span class="jive-xml-tag"></h:commandButton></span>
                <span class="jive-xml-tag"><div style="min-width: 400px; min-height: 22px; height: 22px; width: 400px;" id="progressbar"></span>
                <span class="jive-xml-tag"><ui:repeat var="element" value="#{uploadBean.progressElements}"></span>
                <span class="jive-xml-tag"><span class="progressActive" style="display: inline-block; min-width: 4px; min-height: 21px; height: 21px; width: 4px;"></span><span class="jive-xml-tag"></span></span>
                <span class="jive-xml-tag"></ui:repeat></span>
                <span class="jive-xml-tag"><h:inputHidden value="#{uploadBean.finished}" id="flag" /></span>
                <span class="jive-xml-tag"></div></span>
<span class="jive-xml-tag"></h:form></span>
</code></pre><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>When the user clicks the commandButton the upload is started. On the server side the send request is wrapped and the request is parsed by a ServletFileUpload object. This looks like this:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><pre class="jive-pre"><code class="jive-code jive-java"><font color="navy"><b>try</b></font><font color="navy">{</font>
 
            ServletFileUpload upload = <font color="navy"><b>new</b></font> ServletFileUpload();
            upload.setFileSizeMax(maxFileSize);
            upload.setFileItemFactory(<font color="navy"><b>new</b></font> ProgressMonitorFileItemFactory(request, username));
 
            ProgressListener progressListener = <font color="navy"><b>new</b></font> SignalFinishProgressListener(request.getSession(), <font color="red">"FileUpload.Progress.finished"</font>);
            upload.setProgressListener(progressListener);
 
            @SuppressWarnings(<font color="red">"all"</font>)
            List fileItems = upload.parseRequest(request);
            formParameters = <font color="navy"><b>new</b></font> HashMap<String,String>();
            fileParameters = <font color="navy"><b>new</b></font> HashMap<String,FileItem>();   
 
            <font color="navy"><b>for</b></font>(<font color="navy"><b>int</b></font> i=0;i<fileItems.size();i++)<font color="navy">{</font>
                FileItem item = (FileItem)fileItems.get(i);
                <font color="navy"><b>if</b></font>(item.isFormField() == <font color="navy"><b>true</b></font>)<font color="navy">{</font>
                    formParameters.put(item.getFieldName(),item.getString());
                <font color="navy">}</font><font color="navy"><b>else</b></font><font color="navy">{</font>
                    fileParameters.put(item.getFieldName(),item);  
                    request.setAttribute(item.getFieldName(),item);
                <font color="navy">}</font>   
            <font color="navy">}</font>
        <font color="navy">}</font><font color="navy"><b>catch</b></font>(FileUploadException fe)<font color="navy">{</font>
            fe.printStackTrace();
            <font color="navy"><b>throw</b></font> <font color="navy"><b>new</b></font> UploadError(fe.getMessage());
        <font color="navy">}</font><font color="navy"><b>catch</b></font>(Exception ne)<font color="navy">{</font>
            ne.printStackTrace();
            <font color="navy"><b>throw</b></font> <font color="navy"><b>new</b></font> RuntimeException(ne);
        <font color="navy">}</font>
    <font color="navy">}</font>
</code></pre><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>The installed ProgressListener just sets a sessionvariable called "FileUpload.Progress.finished" if the upload is ready. Furthermore the percentage of written bytes is stored in the session under the key "FileUpload.Progress.file" (You can't see it here, its done while writing the Fileitems to disk).</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>There is also registered a onclick listener to the button, which starts the polling. It is sending an ajax.request to render the progressbar.</p><p>The javascript looks like this :</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><pre class="jive-pre"><code class="jive-code jive-java">function startPolling(formid) <font color="navy">{</font>
    function poll(data)<font color="navy">{</font>
        <font color="navy"><b>if</b></font>(data.status == <font color="red">"success"</font>) <font color="navy">{</font>
            alert(<font color="navy">'POLL'</font>);
            var flag = document.getElementById(formid+<font color="navy">':flag'</font>);
            <font color="navy"><b>if</b></font>(flag.value != <font color="red">"true"</font>) <font color="navy">{</font>
                startPolling(formid);
            <font color="navy">}</font>
        <font color="navy">}</font>
    <font color="navy">}</font>
    jsf.ajax.request(formid, null, <font color="navy">{</font>render: formid, onevent: poll<font color="navy">}</font>);
<font color="navy">}</font>
</code></pre><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Okay,we nearly got it : ) . Last there is the uploadBean.upload method :</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><pre class="jive-pre"><code class="jive-code jive-java"><font color="navy"><b>public</b></font> <font color="navy"><b>void</b></font> upload()<font color="navy">{</font>
        HttpSession session = (HttpSession)FacesContext.getCurrentInstance().getExternalContext().getSession(<font color="navy"><b>false</b></font>);
        status = (Double)session.getAttribute(<font color="red">"FileUpload.Progress.file"</font>);
        <font color="navy"><b>if</b></font>(status == <font color="navy"><b>null</b></font>)
            <font color="navy"><b>return</b></font>;
        System.out.println(<font color="red">"Percentage : "</font> + status.intValue());
        <font color="navy"><b>for</b></font>(<font color="navy"><b>int</b></font> j = status.intValue() - progressElements.size(); j > 0; j--)
            progressElements.add(<font color="navy"><b>new</b></font> Byte((<font color="navy"><b>byte</b></font>)0xff));
        <font color="navy"><b>if</b></font>(session.getAttribute(<font color="red">"FileUpload.Progress.finished"</font>) != <font color="navy"><b>null</b></font>) <font color="navy">{</font>
            <font color="navy"><b>for</b></font>(<font color="navy"><b>int</b></font> j = 100-progressElements.size(); j>0; j--)
                progressElements.add(<font color="navy"><b>new</b></font> Byte((<font color="navy"><b>byte</b></font>)0xff));
            finished = <font color="navy"><b>true</b></font>;
        <font color="navy">}</font>
    <font color="navy">}</font>
</code></pre><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>This method gets invoked before the page gets rendered. Thats because i registered a preRenderView event listener to the page. This means, that this method gets called after every send ajax request, which goes through the partial lifecycle to render the progressbar. The method eventually adds new Bytes to the progressElements list. The list gets used by the ui:repeat element to build the progressbar. Finally the method checks if the FileUpload.Progress.finished attribute was set by the ProgressListener, which we installed to the ServletFileUpload instance (you remember ? ; ) ).</p><p>Ok, i hope you understood the set up. And now to my problem. When i upload a file, there are no ajax requests send, while uploading. The result is that my progressbar doesnt update itself. </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Do you know a workaround, or at least can tell me the reason of this ?</p></div>
<div style="background-color: #f4f4f4; padding: 10px; margin-top: 20px;">
<p style="margin: 0;">Reply to this message by <a href="http://community.jboss.org/message/590187#590187">going to Community</a></p>
<p style="margin: 0;">Start a new discussion in JBoss Web Development at <a href="http://community.jboss.org/choose-container!input.jspa?contentType=1&containerType=14&container=2112">Community</a></p>
</div></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>