I am using FileUpload Auto in the Primefaces Showcase http://www.primefaces.org:8080/showcase/ui/file/upload/auto.xhtml?jfwid=f92d9
Upload is successful but progess bar stucks in the screen like that. Is anyone faced this problem before?
<p:fileUpload listener="#{productBean.handleFileUpload}" mode="advanced"
update="messages" auto="true" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
I used this code in the JSF
Related
Primefaces 7.0, JSF 2.1.19
I am trying to replace richfaces 3.3.3 with primefaces 7.0 (and upgrade JSF to 2.1) and got a special behaviour from the fileUpload widget: When I first render the page it works without problems (no fileupload done, just render it), then I navigate again to the same page it is broken:
The fileupload component:
<p:fileUpload disabled="#{antragAttachments.fileUploadDisabled}" id="attachmentUpload" widgetVar="attachmentUpload" binding="#{antragAttachments.fileUpload}"
fileUploadListener="#{antragAttachments.fileUploadListener}" label="Durchsuchen..." uploadLabel="Datei anhängen" cancelLabel="Abbrechen" invalidFileMessage="test typ"
mode="advanced" fileLimit="1" sizeLimit="15728640" invalidSizeMessage="Der Dateianhang ist zu groß! Die maximale Größe beträgt 15MB!" previewWidth="1"
oncomplete="uploadComplete();" auto="true">
</p:fileUpload>
This is the (menu) component the navigate again to the xthtml:
<ui:repeat value="#{name}" var="item" >
<div id="menuOP" class="ebene#{item.shifting} #{item.selected ? 'divselected' : 'divnotselected'} #{item.spriteClass}">
<p:commandLink immediate="#{item.immediate}" value="#{item.label}" rendered="#{item.enabled}" action="#{item.navigate}"
styleClass="#{item.selected ? 'selected' : 'notselected'}" oncomplete="#{item.oncomplete}"/>
<h:outputText id="menuNoLinkText" rendered="#{!item.enabled}" styleClass="disabled" value="#{item.label}" />
</div>
</ui:repeat>
I tried to remove the immediate, set the type to "submit", use h:commandLink (without the oncomplete of course) just to see if I can get this running somehow. Does not work.
I also looked at the Primefaces fileupload introduction from balusC, but my problem is not the fileupload, it is the second rendering. There is also a Primefaces forum entry about something similar, but the trick von melloware did not work also.
What I do not understand, by the first click on the menu the rendering works fine and after every click on the menu-commandlink the browser console tells me that the widget is not available.
I found examples with similar problems, but there is most of the time a javascript call of the widget like PF('attachmentUpload').doSomething(), but this is not the case here.
EDIT:
I found out that when I first click on the commandlink the fileupload.js is loaded:
By the second click this is not the case anymore:
I also found a thread with the same problem: <p:layout> and <p:fileUpload> not working on page refresh, but there the only solution seems to be to take the css and js for fileupload and add it manualy to as resource... which is a little creepy...
I am using prime faces file upload feature in my application form, whenever i upload the file it is not displaying the preview image in screen.
I would like to know which attribute and class to refer for this issue. please find the sample code below.
<fileUpload
id="uploadImage"
fileLimit="1"
fileUploadListener="#{publicSarFormDataBean.handleFileUpload}"
process="#form"
mode="advanced"
multiple="false"
auto="true"
onstart="PF('statusDialog').show()"
oncomplete="PF('statusDialog').hide(), PF('documentListTbl').filter()"
dragDropSupport="true"
sizeLimit="1000000000"
allowTypes="/(\.|\/)(png|jpeg|JPEG|jpg|JPG)$/"
invalidFileMessage="File is invalid"
update="messages"
styleClass="Fleft FontBold">
</p:fileUpload>
The 'preview' is only relevant before uploading. And since you have auto="true" the files are automatically uploaded and a preview in the p:fileUpload is useless.
It is all working fine in the PrimeFaces upload showcase
In Primefaces 5.1 I need File upload complete to call another method. i.e. upload button press the handFileUpload action perform then upload complete to need to call another action.
<p:fileUpload fileUploadListener="#{fileUploadView.handleFileUpload}"
mode="advanced" update="messages" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" >
</p:fileUpload>
I try p:ajax event="onfileUploadComplete it not working then which event to call function when upload complete?
p:fileUpload has an oncomplete attribute:
Client side callback to execute when upload ends.
(PrimeFaces 5.1 Documentation, page 207)
You can use this in combination with p:remoteCommand to call a bean method from a JavaScript event (see also http://www.primefaces.org/showcase/ui/ajax/remoteCommand.xhtml).
<p:fileUpload fileUploadListener="#{fileUploadView.handleFileUpload}" mode="advanced" update="messages" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" oncomplete="fileUploadCallback()" />
<p:remoteCommand name="fileUploadCallback" action="#{bean.myMethod}" />
I searched a lot to find an example of uploading videos using primefaces but no lock. Primefaces uses
allowTypes to specify the data type. If it's possible to upload videos what extensions could be uploaded?
here is a snippet that uploads images.
<h:form enctype="multipart/form-data">
<p:fileUpload
mode="advanced"
fileUploadListener="#{uploaderBB.handleFileUpload}"
allowTypes="/(\.|\/)(gif|jpg|jpeg|gif|png|PNG|GIF|JPG|JPEG)$/"
auto="true"/>
</h:form>
Found this line and now it's working just fine.
allowTypes="/(\.)(mp4|avi|flv)$/"
form:
<h:form enctype="multipart/form-data">
<p:fileUpload value="#{testController.file}"
mode="simple"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
</h:form>
is there any way to add an image preview of the file that is to be uploaded after choosing a file? I know advance mode of fileUpload does this job, but i need it to be in simple mode.