Primefaces - Get files in alphabetical order in multiple file upload component

Question

I am using Primefaces Multiple file upload component in an application. Here i choose 'n' number of files and clicked on upload button. Then i need to get each files in fileUploadListener according to alphabetical order. How it possible?

Answer 1

As the multiple file upload component is a jQuery-File-Upload plugin, the default state is not sequential, that means all the files get upload asynchronously.

To get the component to do a sequential upload, you have to set sequentialUploads to true, and on change we do a little alphabetical sorting of the current files. all this is done by javascript.

Assuming your widgetVar is fileUploadWV

<p:fileUpload widgetVar="fileUploadWV"
              fileUploadListener="#{attachmentBean.onUpload}" />

<script>
   $(function() {
      // setTimeout waits till the widgetVar is ready!
      setTimeout(sortFileUpload, 2000);
   });

   function sortFileUpload() {
      //Set this option to true to issue all file upload requests in a sequential order instead of simultaneous requests.  
      PF('fileUploadWV').jq.data().blueimpFileupload.options.sequentialUploads = true;

      //every time a new file is added, sort the files based on name
      PF('fileUploadWV').jq.change(function() {
          PF('fileUploadWV').files.sort(function fileSort(a, b) {
           return a.name.localeCompare(b.name)
          })
      });
   }
</script>

So in this scenario your files would get uploaded in an alphabetical order.

Note: if you don't set sequentialUploads into true, you have no control which file is going to be sent first.

Github, Online Demo

Hope this helps.