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.
Related
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
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
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)$/"
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 want to show the uploaded file below the fileUpload component after uploading the file. As default it just shows the file when i choose it but after i press upload button file name disappears. I checked all the attributes of the fileUpload tag but couldn't find anything related to it.
edit: Thanks Daniel, your solution works well, but you know the outputText is an external text under the fileUploader i would like to know if primeFaces has a solution to show the file when it is uploaded as it shows after choosing file like the picture below i want to see the file name also after uploading like this:
Just place a <h:outputText and fill it with the file name from your bean after the and update it with your p:fileUpload
like this
<h:form prependId="false" enctype="multipart/form-data">
<p:fileUpload update="#form" mode="advanced" auto="true"
fileUploadListener="#{myBean.myFileUpload}"/>
<h:outputText value="#{myBean.myFileName}"/>
</h:form>
Inside your bean:
public void myFileUpload(FileUploadEvent event) {
myFileName = FilenameUtils.getName(event.getFile().getFileName());
}
Also take a look at the following BalusC answer: event.getFile().getFileName() is returning filename with complete path in JSF2.0 with PrimeFaces 3.5