Geek Answers Handbook

Primary files Download files, File folder outside p: fileUpload anywhere on the page

When downloading a file in a font format, the FileUpload component itself is a dropout zone. I want to create several dropzones, for example, if the user drops files in any other div or table, the Primails File upload component should select this.

I tried to trigger the drop event manually for the feather loading component, but this does not work.

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 });

Similarly, by changing the arguments for the trigger class and Primefaces drag zones, such as .files and .ui-fileupload

+3
source share
2 answers

The trick Primefaces has developed Fileupload functionality based on the plugin below. So, I started work and got a job in networks

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

Just give the id tag to <p:fileUpload/> , for example

 <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 will be displayed as HTML5 File Upload component in the browser .

So the script will be

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

Must be $(window).load() , otherwise it complains about a component not found in the DOM. What does this do the trick.

+3
source

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

  • You need to prevent the default drag and drop behavior

    $ (document) .bind ('drop dragover', function (e) {e.preventDefault ();});

  • Make sure your component is visualized. In my case, I show the drag and drop area for loading in a modal boot dialog that does not appear at the beginning. Thus, I do not call the function on window#load . I call this when opening a modal dialogue.

+1
source

More articles:


All Articles