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?
Related
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 have a datatable with a commandLink in each row, to get a file from the database.
The code I have for the commandLink is:
<p:commandLink title="download file" styleClass="fa fa-lg fa-download output-button" actionListener="#{fileSearchPageBean.getFileToDownload(result.id)}">
<p:fileDownload value="#{fileSearchPageBean.file}" />
</p:commandLink>
The function getFileToDownload in the page bean makes the query to get the file and puts it in the file variable, that is in the fileDownload.
What is happening is that when the datatable is loaded, it makes the queries to get all the files for all the rows. The thing is I just want to make the query and get a specific file when the link for that file is clicked, what am I doing wrong?
Thanks!
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 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.
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