• Post Reply Bookmark Topic Watch Topic
  • New Topic

JSF 2.2 not working properly with AJAX and file uploads  RSS feed

 
Christopher Sharp
Ranch Hand
Posts: 158
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hello,

I'm having problems with using the h:inputFile tag with JSF 2.2 and Glassfish 4.0 on Eclipse. The file uploads work when the enctype is set to "multipart/form-data" in the h:form tag, but AJAX will not work. When I leave out the encType (defaults to "application/x-www-form-urlencoded") AJAX works but the uploads do not work, and in fact Glassfish crashes and generates the message:

The request content-type is not a multipart/form-data

Likewise I'm having the same problems with the PrimeFaces file upload tag p:fileUpload. In a JSF 2.0 it works correctly, but with JSF 2.2 it's giving the same problems and generates the message above.

When I start up Eclipse it tells me that Mojarra 2.2.0 is installed. Is this the source of the problem, and if so, how do I install a later version of Mojarra?
 
Tim Holloway
Bartender
Posts: 18531
61
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
If you're uploading a file, you need the multipart/form-data encoding type. The upload actually sends at least (I haven't counted) 2 parts: the data content and the (alleged) filename. So it won't work without that.

It would be better if you'd explain what you mean by "AJAX will not work".
 
Christopher Sharp
Ranch Hand
Posts: 158
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
That is exactly the problem. If I include multipart/form-data encoding type in my JSF 2.2 file, then the upload works correctly, however, AJAX does not work properly or not at all in that case. It only works if the encoding type is left out, but then the upload will not work.

I tested this out with a simple example. I put in the form a check box and some text that is displayed when the check box is checked using a boolean variable in the bean. When the encoding type is set to multipart/form-data, as it has to be for file uploads, the test AJAX example does not work, but it works correctly when the encoding type is not specified, i.e. the default.

No other changes at all are made, so there is obviously a problem.

Something similar happens with the PrimeFaces upload using JSF 2.2, the file uploads throw an exception, but not with JSF 2.0 for exactly the same code. In the case of PrimeFaces the encoding type is generated. If I specifically set the encoding type to multipart/form-data, AJAX will not work. This was all OK with JSF 2.0 but not JSF 2.2. Of course JSF 2.0 didn't have its own file upload capability so had to use PrimeFaces. I never tried out JSF 2.1
 
Tim Holloway
Bartender
Posts: 18531
61
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You still haven't defined "does not work".

It would help if you could provide a minimal copy of the JSF form and AJAX so that we could see what you are doing.
 
Christopher Sharp
Ranch Hand
Posts: 158
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
OK, thanks, the original code was copied from http://www.javatutorials.co.in/jsf-2-2-file-upload-example-using-hinputfile/ , which has an xhtml file and two Java source files, which I copied exactly before making a few changes.

I changed the xhtml file so that it is as follows:

Apart from a few layout changes, the only changes of consequence are the code between the beginning and end of the AJAX test.

The two Java classes are InputBean.java and FileUploadValidator.java. The only changes I made to the former are to include the following:

I.e. the boolean check and its getter and setter for the AJAX action. The other Java class I didn't change at all.

In the xhtml file, when the encoding type is omitted, the AJAX action fires correctly, and the text "Some text appears here" is displayed or not displayed according to whether the check box is checked or not. This is exactly what is supposed to happen, but the application crashes with the message:

The request content-type is not a multipart/form-data

when attempting to upload a file, which makes sense. However, if I put in enctype="multipart/form-data" in the form, the file upload works without an error, but on clicking the check box, it disappears and no text is rendered. If I refresh the browser (Firefox), the check box reappears as checked, but it does not do anything.
 
Tim Holloway
Bartender
Posts: 18531
61
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
That's better.

Just to confirm: you're not using backing beans with Request Scope are you?
 
Christopher Sharp
Ranch Hand
Posts: 158
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'm using exactly what the link provided, namely:

before the class declaration, and as I said, the file upload works correctly when I have enctype="multipart/form-data" in the h:form tag, but in doing this, apparently I have to sacrifice AJAX functionality.
 
Tim Holloway
Bartender
Posts: 18531
61
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Well, in practical terms, I see no reason why you can't split the form into 2 forms, one for the upload controls and one for everything else (or at least the AJAX controls).

But the AJAX should work and the only thing that would normally suppress the property setting call would be if the ajax data contained one or more invalid fields. But if I'm reading things properly, you're set up (by default) to have AJAX only submit the click event and value of the checkbox that contains it.

When I get a puzzle like that, I usually bring up my browser's javascript debugger (firebug) just to see what's actually going out and coming back.
 
Christopher Sharp
Ranch Hand
Posts: 158
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This is only a simple example to show that AJAX is not working when enctype="multipart/form-data", and indeed I could separate out the form into two parts, and in fact I tried that and it works. The problem is that in my real application the form has some included components from some other xhtml files, and one of these files has an upload component, so re-arranging the code will be a bit tricky.

Another option is to have the form tag with enctype="#{myBean.enctype}", where in my bean I have a string holding the encoding type, then have a getter and a setter to specify whether the private String enctype holds "multipart/form-data" or "application/x-www-form-urlencoded", then have an action to switch between the two types, but that will get a bit messy.
 
Christopher Sharp
Ranch Hand
Posts: 158
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Tim,

For your interest, it looks as if I resolved this problem and got an application working with the PrimeFaces p:fileUpload tag. I did the following:

1) Go to http://repo1.maven.org/maven2/org/glassfish/javax.faces/2.2.5/ and download the file javax.faces-2.2.5.jar.

2) Go to my folder glassfish-4.0\glassfish4\glassfish\modules and rename the original JSF2.2 file javax.faces.jar to a backup name.

3) Copy javax.faces-2.2.5.jar from (1) into the folder in (2), then rename it javax.faces.jar.

4) Add encType="multipart/form-data" to my h:form tags in my code where files are uploaded.

5) Restart Glassfish.

The files now appear to be uploaded correctly, and AJAX works. Also other data are written correctly as well.

Before I upgraded to JSF 2.2 the file uploads and AJAX worked correctly without specifying an encoding type, but until performing the steps above with JSF 2.2, either I left out the encoding in the forms and AJAX worked but file uploads did not, or with encType="multipart/form-data" the files uploaded correctly but AJAX failed to work.

However, these steps do not appear to fix the problems when using the new JSF 2.2 file uploads, so there is perhaps more to deal with. As my application currently uses the PrimeFaces file uploads, as it was written before JSF 2.2 was available, for now that is probably good enough.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!