Primefaces File upload, Drop file outside of p:fileUpload anywhere in the page

问题

In primefaces file upload, FileUpload component itself is the drop zone. I want to create multiple dropzones, for example if user drops files on any other div or table the Primefaces File upload component should pick that.

I tried to trigger drop event manually for primefaces upload component but this is not working.

Please help me with this. Thanks in advance!

Here is what I tried,

$('.otherdropzone').on( 'dragover', function(e) { e.preventDefault(); } ); 

$('.otherdropzone').on( 'dragenter', function(e) { e.preventDefault(); } );

$(".otherdropzone").on('drop', function(e){ 

    e.preventDefault();
    $(".fileupload-content").trigger('drop',e); // Primefaces dropzone cssclass
});

Similar other things by changing arguments for trigger and drop zone class of Primefaces such as .files and .ui-fileupload

回答1:

The trick is Primefaces have developed the Fileupload functionality based on below plugin.So, I started there and got it working in primefaces

https://github.com/blueimp/jQuery-File-Upload/wiki/API

Just give a id to <p:fileUpload/> tag like

<p:fileUpload id="advancedupload" widgetVar="advupload"
              fileUploadListener="#{fileUploadController.handleFileUpload}"
              mode="advanced" dragDropSupport="true" multiple="true"
              update="messages" sizeLimit="10000000" fileLimit="2"
              allowTypes="/(\.|\/)(gif|jpe?g|png|pdf)$/" />

and based on this it will render as HTML5 File Upload component in the browser.

So, script will be

  $(window).load(function(){
        $('#advancedupload').fileupload({
            dropZone: $(document)
         });
     });

Should be $(window).load() otherwise it complain about component not found in DOM. That's it does the trick.

回答2:

As suggest by SRy, you can customize the dropzone using JavaScript. Keep in mind:

You need to prevent the default drag and drop behaviour

$(document).bind('drop dragover', function (e) { e.preventDefault(); });
Make sure your component is rendered. In my case, I show the upload drag and drop area in a bootstrap modal dialog, that is not shown in the beginning. Thus, I do not call the function on window#load. I call it when opening the modal dialog.

来源：https://stackoverflow.com/questions/18439699/primefaces-file-upload-drop-file-outside-of-pfileupload-anywhere-in-the-page

标签

jquery

jsf

file-upload

jsf-2

primefaces