4

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?

Anish Antony
  • 875
  • 3
  • 17
  • 35

2 Answers2

9

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

enter image description here

Hope this helps.

Hatem Alimam
  • 9,968
  • 4
  • 44
  • 56
  • I tried doing this and it worked (when it comes to performing sequential requests) but the final outcome results in only one file got actually uploaded (processed by the `fileUploadListener`). Do you have any suggestion for all `fileUploadListener`s to get called? – nuno Aug 27 '15 at 14:53
  • Also, it seems this is turning into a feature https://github.com/primefaces/primefaces/issues/403 – nuno Aug 27 '15 at 14:57
  • @nuno I didn't get you exactly. The answer I posted was tested for multiple uploads, and for each file the the listener was called, maybe something else is not working for you ? – Hatem Alimam Aug 27 '15 at 14:58
  • Perhaps it is an unrelated issue - I'll check further – nuno Aug 27 '15 at 15:00
  • I'll test my code again, which PF version are you using ? @nuno – Hatem Alimam Aug 27 '15 at 15:03
  • I'm using PF 5.2 and JSF 2.2 – nuno Aug 27 '15 at 15:03
  • 1
    The answer might help you more now. Note: I'm testing with JSF 2.1, but I don't think that this would be the problem you are having... Check the online demo @nuno – Hatem Alimam Aug 27 '15 at 15:15
  • In PF 5, I am geting error: Uncaught TypeError: Cannot read property 'jq' of undefined – mable george Feb 02 '16 at 07:50
1

yes, but this solution is not very elegant:

<p:remoteCommand action="#{attachmentBean.processAttachments}" 
    name="processAttachments" update="attachmentTable"/>  

<p:fileUpload fileUploadListener="#{attachmentBean.onUpload}" 
    oncomplete="processAttachments()" />

attachmentBean.onUpload stores each file inside a List/Map/SortedMap attachmentBean.processAttachments eventually sorts that List/Map and process attachments in order

attachmentBean must be at least @ViewScoped

Michele Mariotti
  • 7,372
  • 5
  • 41
  • 73