PrimeFaces p: fileUpload multiple autoComplete files only work after the first file

Question

I am trying to upload some files and then redirect to another oncomplete page the problem is that oncomplete only works after loading the first file

 <p:fileUpload mode="advanced" label="#{FileMessages.file_add_file_lbl_Select_File}" fileUploadListener="#{fileAddFileAction.upload}" oncomplete="redirect(#{fileAddFileAction.groupId});" multiple="true" allowTypes="/(\.|\/)(txt|doc|docx|pdf)$/" widgetVar="fileUplaod" > </p:fileUpload> 

Java Script Function: Redirection (groupId)

 function redirect(groupId) { var url = "/network/group/files.html?gId="+groupId; $(location).attr('href',url); } 

bean.java

 public void upload(FileUploadEvent event) { UploadedFile uploadedFile = event.getFile(); try { String thumbnail = getDestination() + uploadedFile.getFileName(); String[] filetype = thumbnail.split("\\."); String newfilename = Calendar.getInstance().getTimeInMillis() + "." + filetype[1]; SystemFile file = new SystemFile(); file.setAccount(getActor().getAccount()); file.setCtime(new Date()); file.setName(newfilename); file.setPath(getDestination()); file.setFileType(FileUtil.checkFileType(filetype[1])); file.setOriginalName(uploadedFile.getFileName()); getFileService().saveSystemFile(file); copyFile(getDestination() + newfilename, uploadedFile.getInputstream()); copyFile(getDestination() + newfilename, uploadedFile.getInputstream()); } catch (IOException ex) { Logger.getLogger(FileAddFileAction.class.getName()).log(Level.SEVERE, null, ex); } } 

Answer 1

Known issue seems to be: http://code.google.com/p/primefaces/issues/detail?id=3836

The user patch was made by the user on this page:

You can use it by adding the following line to the p: fileUpload tag:

 <p:ajax event="fileUploadsComplete" listener="#{filesBean.done}"/> 

where the filesBean.done method is as follows:

 public void done(FileUploadsCompleteEvent event) { System.out.println("done"); } 

Answer 2

I had a similar problem (Primefaces 5). Adding the ajax file fileUploadsComplete failed due to a parent error, not an instance of ClientBehaviorHolder.

Here is my hack. This is not the most pleasant, but it works:

 <script> function setUploadFilesCount() { var numberOfFiles = $('.ui-fileupload-preview').size(); var input = document.getElementById('fileupload-multi-fix-input'); input.value = numberOfFiles; input.onchange(); } </script> <h:form id="file-upload-form"> <p:fileUpload id="file-upload" fileUploadListener="#{backingBean.handleFilesUpload}" mode="advanced" dragDropSupport="false" sizeLimit="10000000" multiple="true" allowTypes="/(\.|\/)(jpg)$/" onstart="setUploadFilesCount()" update=":content"> </p:fileUpload> </h:form> <h:form prependId="false" style="display:none;"> <h:inputText id="fileupload-multi-fix-input" value="#{backingBean.numberOfUploadFiles}"> <f:ajax event="change" execute="@form" /> </h:inputText> </h:form> 

So, in my BackingBean, I have the following:

 @Named @SessionScoped public class BackingBean implements Serializable{ private static final long serialVersionUID = 1L; private int numberOfUploadFiles; //... add getter and setter private boolean isUploadComplete = false; //... add getter and setter private int uploadCount = 0; public void handleFilesUpload(FileUploadEvent event) throws IOException { // ... handle file upload here uploadCount++; if(uploadCount == numberOfUploadFiles){ isUploadComplete = true; } } } 

Explanation:

I added a setUploadFilesCount JavaScript setUploadFilesCount and a second <h:form /> containing a hidden <h:input /> .

<p:fileUpload onstart=... is called once at the beginning of the (first) file transfer. I call the setUploadFilesCount JavaScript setUploadFilesCount in onstart to set the number of files to upload to my bean support.

The number of files is determined by reading the number of occurrences of an element with the css class ui-fileupload-preview . The number of ui-fileupload-preview elements in the view is equal to the number of downloaded files. It happens in

 $('.ui-fileupload-preview').size(); 

input.onchange(); causes the value of the hidden input field to be transferred to the backup bean.

Based on the bean, I can check if the last item was loaded by incrementing the counter

 uploadCount++; if(uploadCount == numberOfUploadFiles){...} 

So, I can check if all elements are loaded or call a special function after the last load element has finished.

---

<p:fileUpload oncomplete... is called every time one of the downloaded files is loaded.

So, in your specific case, you will have to additionally wrap your javascript like this:

 <h:panelGroup id="afterLoad"> <h:outputScript> function redirect(groupId) { if(#{backingBean.isUploadComplete}=='true'){ var url = "/network/group/files.html?gId="+groupId; $(location).attr('href',url); } } </h:outputScript> </h:panelGroup> 

put it in the same form as <p:fileUpload , and add <p:fileUpload ... update="afterLoad" ...