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

Submit a form with rich:fileUpload

klhoste2 Feb 10, 2011 9:47 AM

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.

1. Re: Submit a form with rich:fileUpload

klhoste2 Feb 23, 2011 3:48 AM (in response to klhoste2)

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.

2. Re: Submit a form with rich:fileUpload

klhoste2 Feb 25, 2011 3:48 AM (in response to klhoste2)
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
Actions
3. Re: Submit a form with rich:fileUpload

ilya_shaikovsky Feb 25, 2011 4:05 AM (in response to klhoste2)

that sounds like a real issue :/ seems you need to patch url manually.
Actions
4. Re: Submit a form with rich:fileUpload

klhoste2 Feb 25, 2011 8:54 AM (in response to ilya_shaikovsky)
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 !
Actions
5. Re: Submit a form with rich:fileUpload

ilya_shaikovsky Feb 28, 2011 6:45 AM (in response to klhoste2)

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.
Actions
6. Submit a form with rich:fileUpload

klhoste2 Feb 28, 2011 7:45 AM (in response to ilya_shaikovsky)

Bug created : https://issues.jboss.org/browse/RF-10635
Actions

Go to original post