6 Replies Latest reply on Feb 28, 2011 7:45 AM by kevin 2

    Submit a form with rich:fileUpload

    kevin 2 Newbie

      Hello !

       

      I'm using RichFaces 3.3.3 and I have a page which includes the rich:fileUpload component and other inputs in a form.

       

      Currently, the form need two steps to be submitted:

      * 1 : Upload the files (by clicking on the component "Upload" button)

      * 2 : Validate the form (to post the other form fields)

       

      What I want is to validate the form once, and to retrieve all the form values (including the uploaded files) in the same bean which is in request scope (I don't want to store the uploaded files in session !).

      Is it possible, or is there an option I didn't notice in this component to send the file(s) and the other form fields in the same request ?

       

      I need your help on this issue, I've tried to create a custom component based on the HtmlInputText but I cannot retrieve the file from the request... I've also thought about using the Tomahawk component but I will not use another library just for one component.

       

      Thanks by advance.

       

      KL

        • 1. Re: Submit a form with rich:fileUpload
          kevin 2 Newbie

          After all, I found a solution :

           

          • Hide the "Upload" button, keep only the "Add" one. I use CSS classes to do this :
          <rich:fileUpload id="fileUploadId"
                           addControlLabel="Browse"
                           fileUploadListener="#{fileUpload.processUpload}"
                           maxFilesQuantity="1"
                           listHeight="60px"
                           listWidth="100%"
                           uploadButtonClass="rich-fileUpload-hidden-button"
                           uploadButtonClassDisabled="rich-fileUpload-hidden-button">
          </rich:fileUpload>
          

           

          • Set the onclick attribute on the validate button to upload the chosen file and to clear it when form is submitted:
          <a4j:commandButton  id="uploadFormButton"
                              value="Validate"
                              onclick="#{rich:component('fileUploadId')}.submitForm();"
                              oncomplete="#{rich:component('fileUploadId')}.clear();"/>
          

           

          • For other inputs in the form, retrieve them from the request parameter map:
            public void processUpload(final UploadEvent event)
            {
              if (event == null)
              {
                log.warn(this, "Invalid upload event");
              }
              else
              {
                // retrieve the uploaded item
                final UploadItem aUploadItem = event.getUploadItem();
                if (aUploadItem.getData() != null)
                {
                  setUploadItem(aUploadItem);
          
                  setInput1(JsfUtil.getRequest().getParameter(
                      "fileUploadFormId:input1"));
          
                  setInput2(JsfUtil.getRequest().getParameter(
                      "fileUploadFormId:input2"));
          
                  /* ... */
          
                  //process the form submission
                  this.submit();
                }
              }
            }
          

           

          With this solution, the entire form is sent in the same request.

           

          Hope this will help others.

           

          KL

          • 2. Re: Submit a form with rich:fileUpload
            kevin 2 Newbie

            Oh oh...

             

            My solution is good but I got another issue !

             

            When I click on the "Validate" button the browser URL becomes like this :

             

            http://localhost/index.xhtml?_richfaces_upload_uid=_richfaces_form_upload&uploadFormId:fileUploadId=uploadFormId:fileUploadId&_richfaces_upload_file_indicator=true
            

             

            And when I navigate to another page, the URL doesn't change, so if I press F5 or "reload page", the file upload form is submitted again (even if I'm on another page) !!

             

            Is there a simple way to keep the default url ( /index.xhtml with no arguments) after submitting the form ?

             

            Thanks !

             

            KL

            • 3. Re: Submit a form with rich:fileUpload
              Ilya Shaikovsky Master

              that sounds like a real issue :/ seems you need to patch url manually.

              • 4. Re: Submit a form with rich:fileUpload
                kevin 2 Newbie

                The upload action (when click on upload button) isn't the same than the JavaScript submitForm() function one ?

                 

                 

                Another issue happened when uploading a too large file, in result I got a blank page returning:

                 

                <html id="_richfaces_file_upload_size_restricted"></html>
                

                 

                How can I do to call the real action to upload the file ? submitForm does it wrong !

                • 5. Re: Submit a form with rich:fileUpload
                  Ilya Shaikovsky Master
                  The upload action (when click on upload button) isn't the same than the JavaScript submitForm() function one ?

                  common submission occurs from iframe so main window url not affected in that case :/

                   

                  Another issue happened when uploading a too large file, in result I got a blank page returning:

                  seems one more problem of that function

                   

                  really weird. please report to jira and somebody will review when time permit.