8 Replies Latest reply on Jul 9, 2013 6:13 AM by verhelespetro

    <rich:fileUpload> not working in IE8

    sumitghosh945

      I have a <rich:fileUpload> in my xhtml  page.after successful upload, all uploaded files will be shown to a <rich:dataTable>. I have given the render attrbute in <rich:fileUpload> for rendering the files in <rich:dataTable> and also written method for fileuploadListener.And also done relevant coding for this functionality,its working fine in mozilla,chrome,opera,but not in IE8.

       

      I have given:::

      <meta http-equiv="X-UA-Compatible" content="IE=8"/>

      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/> for making it compatible in IE8,but in vein.

       

      my code is as follows:

       

      <rich:fileUpload style="width:412px;"

                                              noDuplicate="true"

                                              fileUploadListener="#{fileUploadController.listener}"

                                              maxFilesQuantity="#{fileUploadController.uploadsAvailable}"

                                              id="upload" immediateUpload="#{fileUploadController.autoUpload}"

                                              acceptedTypes="#{fileUploadController.supportedTypes}"

                                               listHeight="182px" doneLabel="Uploading File"

                                               immediate="true">

                                             <a4j:ajax event="uploadcomplete" render="uplodedFileTable"

                                                oncomplete="if(#{fileUploadController.error}){#{rich:component('errorPopup')}.show();}" />

        </rich:fileUpload>

        • 1. Re: <rich:fileUpload> not working in IE8
          bleathem

          What version of RichFaces are you using?  Does the showcase sample (http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=fileUpload&skin=blueSky) work for you in IE 8?

          • 2. Re: <rich:fileUpload> not working in IE8
            verhelespetro

            Hi, Brian. I have the same problem with rich:fileUpload element, Richfaces 4.3.1.Final + Seam 2.3.1.CR1. I checked in IE9.

            The showcase you posted a link to works OK in IE9, but what version of Richafaces is used there? At least UploadedImage class is not present in Richfaces 4.3.1.Final.

             

            The below is my very simple showcase which works perfectly in Firefox 21.0, but doesn't work in IE9.

            When testing in IE9, I see processUpload method is called, but after this, there's no ui update neither of the rich:fileUpload element itself nor the h:textOutput element.

            I think you can easily adopt the code to your environment replacing seam annotations with @ManagedBean and @SessionScoped annotations.

             

            TestBean.java

             

            import org.jboss.seam.ScopeType;

            import org.jboss.seam.annotations.Name;

            import org.jboss.seam.annotations.Scope;

            import org.richfaces.event.FileUploadEvent;

             

            @Name("testBean")

            @Scope(ScopeType.SESSION)

            public class TestBean {

                private String filename;

             

                public String getFilename() {

                    return filename;

                }

             

                public void processUpload(FileUploadEvent event) {

                    filename = event.getUploadedFile().getName();

                    System.out.println(event.getUploadedFile().getName());

                    System.out.println(event.getUploadedFile().getData().length);       

                }

            }

             

            test.xhtml

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

            <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"

                xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich">

             

            <h:head>

            </h:head>

            <h:body>

                <h:form>

                    <h:outputText id="text" value="#{testBean.filename}" />

                    <rich:fileUpload fileUploadListener="#{testBean.processUpload}">

                        <a4j:ajax event="uploadcomplete" execute="@none" render="text" />

                    </rich:fileUpload>

                </h:form>

            </h:body>   

            </html>

             

            ------------------------------------------------------

            And here are the screenshots I see after uploading the file:

             

            In firefox:

            ff.png

             

            In IE9:

            ie9.png

            • 3. Re: <rich:fileUpload> not working in IE8
              bleathem

              The version of RichFaces run by the showcase is visible at the bottom of the page.  Currently it is running version 4.3.2.Final of RichFaces.


              If you say the showcase sample works for you, try upgrading your RichFaces library to the latest release.

              • 4. Re: <rich:fileUpload> not working in IE8
                verhelespetro

                Brian, the same result with 4.3.2.Final version with my simple showcase.

                 

                I also tried to fully copy your showcase.

                The only thing I changed in the example is removing ui:composition tag and wrap the xhtml code in h:body tag, and also added <h:head></h:head> after <html> tag.

                And it also runs similar to my simple showcase, it works in firefox, and doesn't in IE9.

                Maybe, you have some special setting for IE in your showcases page or somewhere else?

                • 5. Re: <rich:fileUpload> not working in IE8
                  bleathem

                  What container are you running in? JBoss EAP? WildFly? Tomcat?  Which implementation/version of JSF?

                  • 6. Re: <rich:fileUpload> not working in IE8
                    verhelespetro

                    I use Jboss 7.0.1 and the JSF implementation it provides - Mojarra 2.0.4.

                    • 7. Re: <rich:fileUpload> not working in IE8
                      bleathem

                      You are likely hitting JAVASERVERFACES-2063 which was resolved in Mojarra 2.0.7.  Try upgrading to JBoss AS 7.1.1.Final, or JBoss EAP and your problem should go away.

                       

                      Alternatively you can use the IE document compatibility to ensure your page is rendered with an older rendering implementation:

                      http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx

                      • 8. Re: <rich:fileUpload> not working in IE8
                        verhelespetro

                        Two things made my simple example work:

                        1. Upgrading to JBoss AS 7.1.0.Final (didn't try JBoss AS 7.1.1.Final yet).

                        2. Adding <meta http-equiv="x-ua-compatible" content="IE=9, IE=8, IE=7, chrome=1" /> right after <h:head> tag. In Jboss 7.0.1 this meta was moved to the bottom of <head> section below <script> and <link> tags added by framework, but this <meta> should go right after <head> otherwise it will not work. And in Jboss 7.1.0 it was ok and this <meta> was right after <head> tag.

                         

                        So, the final solution who, maybe, has the same problem is to use Jboss 7.1, and the final test example is:

                         

                        TestBean.java

                         

                        import org.jboss.seam.ScopeType;

                        import org.jboss.seam.annotations.Name;

                        import org.jboss.seam.annotations.Scope;

                        import org.richfaces.event.FileUploadEvent;

                         

                        @Name("testBean")

                        @Scope(ScopeType.SESSION)

                        public class TestBean {

                            private String filename;

                         

                            public String getFilename() {

                                return filename;

                            }

                         

                            public void processUpload(FileUploadEvent event) {

                                filename = event.getUploadedFile().getName();

                                System.out.println(event.getUploadedFile().getName());

                                System.out.println(event.getUploadedFile().getData().length);       

                            }

                        }

                         

                        test.xhtml

                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                         

                        <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"

                          xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich">

                         

                        <h:head>

                            <meta http-equiv="x-ua-compatible" content="IE=9, IE=8, IE=7, chrome=1" />

                        </h:head>

                        <h:body>

                            <h:form>

                                <h:outputText id="text" value="#{testBean.filename}" />

                                <rich:fileUpload fileUploadListener="#{testBean.processUpload}">

                                    <a4j:ajax event="uploadcomplete" execute="@none" render="text" />

                                </rich:fileUpload>

                            </h:form>

                        </h:body>  

                        </html>