I'm trying to add advanced mode of FileUpload in Appfuse project and i followed this link: http://www.primefaces.org/showcase/ui/file/upload/multiple.xhtml.
I add it but when in choose my files, there is no files displayed in growl tag and the upload and cancel button steel disable.
In the terminal of my navigator i have this error : TypeError: undefined is not a function.
Can you help me plzz
Thanks
the showcase has a bug
you you need to declare enctype with the value multipart/form-data
Example
<h:form enctype="multipart/form-data">
<p:growl id="messages" showDetail="true" />
<p:fileUpload fileUploadListener="#{fileUploadView.handleFileUpload}" mode="advanced" dragDropSupport="false"
multiple="true" update="messages" sizeLimit="100000" fileLimit="3" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
<p:growl id="messages" showDetail="true" />
</h:form>
Related
I am trying to open browsing window with this file upload code but it is not responding means the pop up window not opening
<p:fileUpload id="fileupload" value="#{data.value}" fileUploadListener="#{fileUploadController.handleFileUpload}"
required="true" allowTypes="#{data.allowedExtensions}" mode="advanced" multiple="true"
update="fileDataTable _mainForm_fileMessages" widgetVar="fileUploadWidget" />
I have a hidden <p:fileUpload> which is opened via <h:outputLabel>.
<p:messages id="message" autoUpdate="true" />
<h:form id="form">
<p:fileUpload id="file-input" auto="true"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/" sizeLimit="10"
invalidSizeMessage="wrong size" fileUploadListener="#{bean.image}"
update="#form message" style="display: none;"
invalidFileMessage="wrong file" />
<h:outputLabel for="file-input_input">
<h:graphicImage name="images/dummy.jpg" />
</h:outputLabel>
<h:outputText value="#{bean.file.fileName}" />
<br />
<h:outputText value="#{bean.file.size}" />
</h:form>
Unfortunately, no messages are displayed after validation failed (e.g invalid size or invalid file). Those messages are displayed inside the <p:fileUpload> content box instead of in <p:messages>.
How can I display those messages inside <p:messages> instead of inside <p:fileUpload>?
The validation is performed fully client side without hitting the server. So you can't control this from server side on.
The message container of the <p:fileUpload> is available via messageContainer property of the widget variable. Simple let jQuery move it into the <p:messages> when clicking the label:
<p:messages id="messages" ... />
<h:form>
<p:fileUpload id="file-input" widgetVar="file-input" ...
styleClass="ui-helper-hidden" />
...
<h:outputLabel for="file-input_input" ...
onclick="PF('file-input').messageContainer.appendTo($('#messages'));" />
</h:form>
(I only renamed <p:message id> to be more sensible, and used a PrimeFaces specific class to hide it instead of an inline style)
The onstart and oncomplete attributes of <p:fileUpload> weren't usable as they are only executed when the client side validation has passed and the file upload request is actually sent.
PrimeFaces 4.0 FileUpload multiple="true" but i am not selection multiple. only one file select.
it is work in chrome but is not work ie9. Why?
xhtml
<p:dialog id="DosyaDlg" widgetVar="DosyaDialog" modal="true" resizable="false" appendTo="#(body)" header="#{msg['header.dialog.dosyaEkle']}" closeOnEscape="true">
<h:form id="DosyaForm" enctype="multipart/form-data">
<p:fileUpload fileUploadListener="#{yazilimArizaBean.dosyaYenile}" dragDropSupport="false" fileLimit="3" sizeLimit="1000000" mode="advanced" multiple="true" uploadLabel="#{msg['button.yukle']}"
cancelLabel="#{msg['button.iptal']}" description="Select Images" label="#{msg['button.sec']}" allowTypes="/(\\.|\\/)(doc|docx|xls|xlsx|ppt|pptx|txt|png)$/" oncomplete="DosyaDialog.hide()" />
</h:form>
</p:dialog>
Thank you for your helps
Seems like IE9 does not support multiple File Upload from Primefaces post v2.2.1 (meaning your v4.0 is included in the non-working ones).
See issue here : https://code.google.com/p/primefaces/issues/detail?id=3869
This will not get fixed.
I'm using JSF, CDI. Can i upload file and some text fields in the same form?
<h:form>
<h:inputText value="#{mybean.discription}" />
<p:fileUpload value="#{mybean.file}" mode="simple"/> //Or <h:inputFile value="#{mybean.file}"/> if using jsf2.2
<h:commandButton action="#{mybean.submit}" value="Submit"/>
</h:form>
I saw a lot of tutorials about uploading file, but in those tutorials only use single component to upload file.
I tried to do but i didn't.
Can you give me an answer? Thanks
I done. I forgot enctype="multipart/form-data"
<h:form enctype="multipart/form-data">
<h:inputText value="#{mybean.discription}" />
<p:fileUpload value="#{mybean.file}" mode="simple" />
<h:commandButton value="Submit" action="#{mybean.submit}" />
</h:form>
I am uploading a file, namely a picture. I want the picture on the page to update to the new one once it is uploaded. I am unable to get this to work.
I am using the following code to upload the file:
<h:form id="fileUploadForm" enctype="multipart/form-data" >
<p:remoteCommand name="showFileUpload" onstart="fileUpload.show();"/>
<p:remoteCommand name="hideFileUpload" onstart="fileUpload.hide();"/>
<p:dialog
id="fileUpload"
header="File Upload"
widgetVar="fileUpload"
modal="true">
<h:inputFile id="file" value="#{fileUploadManagedBean.file}"/>
<p:commandButton value="Upload"
action="#{sessionManagedBean.updateDisplay('account')}"
oncomplete="hideFileUpload();updateMainPanel();"
actionListener="#{fileUploadManagedBean.upload}"
ajax="false"
/>
</p:dialog>
</h:form>
The call to updateMainPanel(); in the oncomplete event works for other users. However, for this, it does not. Any ideas on how I can update a component once the file has been uploaded?