ajaxified file upload in jsf - ajax

I want to do a file upload without posting an entire form. The file upload works fine, but the whole form is submitted. This works fine when validation is correct. But when p.e. a required field is empty, the upload does not work and a error message is returned (required field missing)
So i tried to ajax the file upload (ajax=true). But then the upload does nothing.
I tried a work around bu putting the file upload and other fields in different forms. This works, but the result is that data you changed in the other fields is disregarded when doing the file upload.
Any suggestions?
Here is my code I use:
<t:inputFileUpload id="fileupload" value="#{prospectDetail.upFile}" size="50" />
<h:outputLabel for="description" value="#{msg.prospectdetail_description}"/>
<mw:inputText id="description" size="40" value="#{prospectDetail.fileDescription}" />
<p:commandButton styleClass="button" value="#{msg.common_upload}" action="#{prospectDetail.upload}" ajax="false" process="#form" onbegin="busyPopup.show()" oncomplete="busyPopup.hide();"/>

It is not possible to upload files by first version of XMLHttpRequest (which is the core Ajax request controller object in JavaScript). The second version of XMLHttpRequest supports it, but this is not implemented by <p:commandButton> (and has currently low browser support).
As you seem to be using PrimeFaces already, why don't you just use its own <p:fileUpload> component? The single upload or even the auto upload examples should do it for you (don't forget to remove the MyFaces extensions filter from the web.xml after adding the PrimeFaces' file upload filter!). The PrimeFaces' <p:fileUpload> will automatically utilize XHR2 file upload whenever available.
I tried a work around bu putting the file upload and other fields in different forms. This works, but the result is that data you changed in the other fields is disregarded when doing the file upload.
If you put the bean in the view scope instead of the request scope and return null or void from action methods, then this should work.

Related

unable to display external host image

I'm unable to display image of external host on JSF page. In my case it is Apache file server. I'm creating image URL in #RequestScoped bean and then trying to pass it as String in #ViewScoped bean to frontend.
I've tried to display image in two ways:
First by loading it with JSF:
<h:graphicImage name="#{myViewScopedBean.myObject.mainImageUrl}" />
And then with html <img> tag as referenced in this answer.
Afterwards I've tried to print all attributes of myObject.
All String attributes are displayed well, except mainImageUrl. and I'm 100% sure that I'm setting mainImageUrl on backend.
What can provoke this problem? Is there any security JSF configuration?
The name attribute of <h:graphicImage> should represent a JSF resource name, not an URL. JSF resources are explained in among others How to reference CSS / JS / image resource in Facelets template? If you intend to specify a real URL, then you should be using value attribtue instead, or just plain HTML <img>.
So, either
<h:graphicImage value="#{myViewScopedBean.myObject.mainImageUrl}" />
Or
<img src="#{myViewScopedBean.myObject.mainImageUrl}" />
If that still doesn't work, then apparently the URL is plain wrong. Verify the generated HTML output and the browser's builtin HTTP traffic monitor (press F12). You should be able to open the image independently by copypasting exactly that URL straight into browser's address bar.

parsley remote validation - include more data in request

I have started using parsley.js for for validation and it is working great, just added more advanced validation that needs remote data, and got an issue. parsley-remote works fine, but it only send the data of that specific field to the server (title). In order to do my validation, I need also the data stored in the hidden field name="mcid". Can I manage this with parsley? Ideally a general approach that I can use for my entire application (large application, so keeping page specific code to a minimum).
My form (simplified):
<form>
<input type="text" name="title" required="required" parsley-validation-remote="/Admin-Category/validateMainCategoryTitle/" data-validation-remote-method="POST"/>
<input type="hidden" name="mcid" value="2060"/>
</form>
I don't believe that there is an easy way to do it with the built-in Parsley remote validator - any possible solution would be a complicated workaround and you would be better off going with straight JavaScript to do it.
How is the value in the hidden field set? If I were doing this in Java, I would put the hidden field in the DTO or in the UpdateController so the value would be available to the validateMainCategoryTitle method. Is that possible with your application?
Alternatively, since you have both the values available on the form, can you write a custom parsley validation routine to check them, or do you need to go back to the server for some reason?
Just a follow up on my own question. Parsley is now release in v.2 and the new parsley remote plugin has standard support for sending more parameter. Problem solved!

Firefox overrides javax.faces.ViewState with old value on F5, how to turn off autocomplete

I am using JSF 2.1 on Tomcat 7 and opening it in Firefox 23.0.0.1.
The page generates a javax.faces.ViewState hidden input field as expected:
<input type="hidden" value="2442695108697186454:-4079620282104128276" id="javax.faces.ViewState" name="javax.faces.ViewState">
When hitting F5, the server sends a new id for javax.faces.ViewState, which is correct. However, Firefox keeps the old value in the hidden input. The result is that the old view-scoped bean is taken on ajax requests.
Only when I force a hard refresh by Strg/Ctrl+F5, then Firefox takes the new value from server. I think it's a feature of Firefox (I often see when reloading a page with a form Firefox keeps my inputs).
Any ideas how to deal with that? I think it's related to Preventing Firefox from remembering the input value on refresh with Meta tag, but how do I put autocomplete="off" on this JSF-generated hidden input component?
Mojarra adds already by default autocomplete="off" to the view state hidden field since version 1.2. Apparently your webapplication is configured to disable it because the developers were fearing the W3 HTML validator for some reason, or perhaps the HTTP response body is been passed through some overzealous (X)HTML formatting filter. The autocomplete="off" in an <input type="hidden"> is namely invalid in (X)HTML.
Look for the following context parameter in web.xml. If it's present, get rid of it. It defaults to true already.
<context-param>
<param-name>com.sun.faces.autoCompleteOffOnViewState</param-name>
<param-value>false</param-value>
</context-param>
Or if you have indeed such a formatting filter, look in its documentation how to tell it to not remove (X)HTML-invalid attributes.
See also:
Mojarra issue 1129

jsf primefaces fileupload on submit

Does anyone know how I can upload multiple files with primefaces (http://www.primefaces.org/showcase/ui/fileUploadMultiple.jsf) when I click my own submit button? The upload-button there should not be visible, because I want to chose the upload-time on my own.
I have multiple pm-fileupload components in my document, so I want to upload them all together.
is there a way? Or must I use the old browser-upload?
Use multiple <p:fileUpload mode="simple"> generated by a <ui:repeat> or <h:dataTable>.
The <p:fileUpload mode="advanced"> indeed isn't suitable for this requirement, or you must turn on automatic immediate upload on select by adding auto="true".

CodeIgniter throwing Error 404 when posting certain values through form submit

I'm using and older version of CodeIgniter (1.7.1), and I'm having problems submitting forms.
I have a form with some text fields and a textarea field which has a TinyMCE editor attached.
If I insert only text into textarea, everything works fine.
If I insert an image like this:
<img src="htt://www.website.com/image.jpg" alt="" width="352" height="262" />
Everything works fine as well.
The problem occurs whenever I insert an image through TinyMCE (and an upload manager). In this case, something like this is inserted:
<img src="../../../tiny_upload/1.jpg" alt="" width="352" height="262" />
When I hit the Post button, I get a "404 Page Not Found" page. I can't even print what is getting posted. It just throws this error immediately.
Thank you for your answers!
EDIT:
View file
Controller file
It is really old code (hence the 1.7 CI version), that is why it is a little messy.
Try to change the src using JavaScript to the first one and then submit the form. That may work.
If you could post your code, we could more easily give you an answer for the 404 error message.

Resources