p:fileupload image preview is not working - jsf

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

Related

Primefaces Auto Image Upload - Progress Bar Stuck After Upload

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

Is it possible to upload videos using primefaces?

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)$/"

PrimeFaces p:fileUpload upload multiple files on submit

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?

primefaces fileUpload with image preview of the file using simple mode

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.

p:fileUpload not showing any thing upon clicking on it

<p:fileUpload fileUploadListener="#{editBean.relatedFileEditUpload}"
style="width:370px;"
rendered="#{editBean.uploadFileRender}"
process="relatedFileUploadingEditForm:relatedFileType"
update="relatedFileUploadingEditForm:messages relatedFileUploadingEditForm:relatedFileType">
</p:fileUpload>
The above is the code snippet that I am using. But it is not showing the browse option up on clicking the upload button.Please Help.
You have to set mode and value attributes. So try let's say mode="simple" and value="#{editBean.yourFile}" (org.primefaces.model.UploadedFile)

Resources