I have a form with two fields:
<h:form>
<p:fileUpload fileUploadListener="#{mybean.fileUpload}" mode="advanced" auto="true" />
<h:inputText value="#{mybean.discription}"/>
<h:commandButton action="#{mybean.submit}" value="Submit"/>
</h:form>
If the file is large, it needs some seconds to upload completely. The form don't use ajax.
To be a user, i choose a file (large file) then click submit button immediately.
What happens with the file, null or submit method wait until file to be uploaded completety?
Thanks.
I think it is important to understand how really the file will be uploaded by p:fileUpload component. It will be done in one of two ways: it will create a hidden separate form put the input type="file" there and submit this form or it will use flash to upload the file which also doesn't use original form.
All this means that it can not be synchronized in browser and when you click submit button it will not wait until the file is uploaded.
Still it can be synchronized on the server. If you use JBoss Seam than probably method calls will be synchronized(as far as I rememeber jboss seam synchronizes ajax requests on server side). If you use some other framework(Spring) than it won't be syncronized and it can happen that #{mybean.submit} will be called earlier than #{mybean.fileUpload} or even the state on the server can be lost and #{mybean.fileUpload} won't be called at all.
But in any case the file will be uploaded to the server but can be ignored by the bean.
Related
We are using the primefaces for file upload handling in our web application. The upload component becomes visible, upon some event on the page (button pressed). We would like to be able to catch the event when CANCEL button is pressed, in order to use it to hide the upload component back. Any advise? Javascript or CSS would not do the work, as we also need to do some server logic for this.
Code:
<h:form id="uploadFileForm" enctype="multipart/form-data" rendered="#{filesMenu.enableFileUpload}">
<p:fileUpload style="font-size:12px;"
fileUploadListener="#{filesMenu.handleFileUpload}"
mode="advanced" dragDropSupport="false"
update="msgUpload , :formFilesListId , :formFilesListId:dataTableSimpleFilesId, :createNewFileFromSelectionForm"
sizeLimit="100000" fileLimit="1" allowTypes="/(\.|\/)(cfg)$/" />
<p:growl id="msgUpload" showDetail="true" />
</h:form>
Catch the cancel-button click with Javascript/JQuery. On the one hand you can invoke an hidden button on your jsf page which triggers the server logic. On the other hand you can trigger the following component from Javascript :
<p:remoteCommand name="functionName" action="#{yourBean.yourMethod}">
Catch the cancel button :
$(document).ready(function() {
$(".ui-fileUpload").on("click",".cancel",function() {
//Approach remoteCommand
functionName();
//Approach hidden button
$(".jQueryTohiddenButtonClass").click();
}
Probably you have to customize the jQuery path, so they fit to your demands.
Another option is to hide the cancel-button completely with
.ui-fileupload-cancel {
display: none;
}
and create your own button instead which calls an action/actionListener and hides the dialog.
I went even further and hid all 3 buttons and created my own save button too, which called PF('fileupload_widgetvar').upload(); in oncomplete. Then you'd need to have some javascript to make the page wait until the upload is finished, as the ajax is asynchonous so you can't redirect/hide the dialog right away. Let me know if you want that code.
I need to upload multiple files, but I need to upload them all together then the "submit" button is clicked (that either ALL files are stored, or nothing).
How can I achieve this?
And how can I get a list of files which I uploaded?
here is my code:
<h:form>
<p:fileUpload fileUploadListener="#{bean.moveFile}" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" mode="advanced" dragDropSupport="true" multiple="true" />
<h:commandButton value="Speichern" action="#{bean.submit}" />
</h:form>
Check out the Primefaces Showcase. The handleFileUpload method gets called for every uploaded file. If you want to have a list of uploaded files, just store them in an adequate data structure.
If you need to know how to store a specific uploaded file, read these articles:
1.) j2ee primefaces fileupload file saving destination
2.) How to Upload a file using JSF/Primefaces?
3.) Where does p:fileUpload save my file?
i have the file upload using primefaces, in advanced mode,
<p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload(event)}"
mode="advanced"
update="messages"
sizeLimit="100000000"
allowTypes="/(\.|\/)(gif|jpe?g|png|doc|docx|txt|pdf)$/"
auto="true"/>
<p:growl id="messages" showDetail="true"/>
But i want to add a few nice finishing touches, like i have seen examples that use growl, that pops up a message saying success etc once completed, but am unsure on how to do this with glassfish, and do it on completion of the file being uploaded
Thanks
Solved the issue, my bean wasn't configured correctly thats all :)
EDIT :
Looked into the glassfish console and saw it was not calling the event caller, so it was skipping this enter section, i just simply changed the method call in the xhtml, and make sure the bean was correct, if anyone wants to see the bean just post a comment and ill add it :)
I have to perform two operations on button click.
call a method in a bean which will return a url and it will be set in some variable.
after that I have to open that url in another tab. I am using the action attribute of CommandButton and it is setting the URL value correctly, but how do I open that url as pdf in a new tab. i.e "URL of pdf should open in a new tab"
Code sample as follows:
<div class="form-options">
<h:commandButton value="Download Report" styleClass="btn btn-primary btn-icon buttonCustom" actionListener="#{reportBean.GenerateReport}">
</h:commandButton>
</div>
Hope I unterstood you right. This worked for me:
Provide the method generating the report and the URL in the actionListener-attribute of the commandButton (what you already did, according to your sample code).
Provide the method returning the URL in the action-attribute of the commandButton (it will be called after the actionListener-method).
For opening a new tab, add target="_blank in the parent <h:form> (taken from this questions answer)
XHTML-Code:
<h:form target="_blank">
<h:commandButton value="Show Report"
actionListener="#{reportBean.generateReport}"
action="#{reportBean.getUrl}" />
</h:form>
As this approach applies the target="_blank" to all non-ajax calls, here's another way using Javascript:
<h:form>
<h:commandButton value="Show Report"
actionListener="#{reportBean.generateReport}"
action="#{reportBean.getUrl}"
onclick="this.form.target='_blank'"/>
</h:form>
Java-Code:
public void generateReport(final ActionEvent evt) {
// ... generating report and setting url-variable
}
public String getUrl() {
return url;
}
If you have to forward to an external link, see this question
Use commandLink instead of commandButton..
When commandLink is used you need to provide value for target attribute as new window.
<h:commandLink target="new window">
Rest all the code will be as per your requirement.
Since the URL in which your report is present is already present in one of the variables you can use this variable from the bean in commandLink to provide the URL..
Elsewhile you can use an iframe also.It is generally used to display the report on the same page...
As I understand, your problem is not about redirecting the result of the action to a new tab, instead you want to show a report (if my guessing is right, you're using a JasperReport and want to show it in PDF format). To do this, you must download the file to the client computer and then let the default editor/program on the client handle the file.
I won't go into details for file download, BalusC provides good info about this matter:
How to stream a file download in a JSF backing bean?
How to download a file stored in a database with JSF 2.0
The relevant part to show PDF (or any other) files in browser is the ContentType of the response. This will say to the browser how the file must be threatened. Some content type values
PDF: application/pdf
Excel: application/vnd.ms-excel
Microsoft Word: application/ms-word
More: Internet media type
In case I'm wrong and you don't want to show (download) the file and need to open the file in a new Window, you have two ways (resuming both #JanisK. and #AngelsandDemons answers):
Setting the target of the form as "_blank", but this way will do that all the performed actions will open a new tab/window.
<h:form target="_blank">
<h:commandButton ... />
</h:form>
Using a commandLink instead of a commandButton, where you can set the target only for this link requests.
<h:form>
<h:commandLink target="_blank" ... />
</h:form>
When downloading file from server if i use a4j:commandLink file download fail(mean file written to browser screen) if i use h:commandLink it is okay.I want to show a rich modal panel when file downloading but standard components not have a on complete action so i cant hide modal panel after file downloaded .How can i workaround this issue,I am using rich faces 3.3
<h:commandLink value="Download"
action="#{logSearcher.downloadFile}"
onclick="Richfaces.showModalPanel('ajaxLoadingModalBox',{width:450, top:200})"
immediate="true" >
<f:setPropertyActionListener value="#{log}"
target="#logSearcher.selectedLogLine}"
/>
</h:commandLink>
You can use de rich:componentControl or the JS API show function (#{rich:component('mp')}.show).
http://livedemo.exadel.com/richfaces-demo/richfaces/modalPanel.jsf?s=blueSky#
The <a4j:commandLink> sends by default an asynchronous (ajax) request. You cannot download files using asynchronous requests. JavaScript simply does not offer facilities to turn a XMLHttpRequest response into a Save As dialog. You need to download files using a normal synchronous request. The <h:commandLink> does that.
Your best bet is to use the onclick attribute of <h:commandLink> to close the modal panel. If necessary with a setTimeout().