JSF fileupload by dragging file anywhere into the page

Question

I'm currently using the drag&drop feature of Primefaces fileUpload component. It works fine, but what I want is to upload files directly by dragging them anywhere into my page, without the need of clicking a button.

I tried this:

$('.dropzone').on({
    'dragover dragenter': function (e) {
        e.preventDefault();
        e.stopPropagation();
    },
    'drop': function (e) {
        var dataTransfer = e.originalEvent.dataTransfer;
        if (dataTransfer && dataTransfer.files.length) {
            e.preventDefault();
            e.stopPropagation();
            $.each(dataTransfer.files, function (i, file) {

              uploadFile([{"name": "filename", "value": file.name}]);
            });
        }
    }
});

<p:remoteCommand name="uploadFile" action="#{bean.uploadFile()}" />

public void uploadFile(){
   String filename = 
       FacesContext.getCurrentInstance()
       .getExternalContext().getRequestParameterMap().get("filename");
}

The problem is that this works for the filename, but not for the file itself. Is this the right approach anyway or is there a way to forward the files list to Primefaces fileUpload and submit the files programmatically without using the gui-component?

have you tried this [SO answer](http://stackoverflow.com/questions/18439699/primefaces-file-upload-drop-file-outside-of-pfileupload-anywhere-in-the-page) before? — malaguna, Oct 20 '16 at 10:44
Yes, but it did not work. I'm not sure if this solution still works for Primefaces 6.0. — sinclair, Oct 21 '16 at 07:57
Im not sure if it satisfy your need but there is this thing: [Dropzone](http://stackoverflow.com/questions/38018632/use-dropzone-with-jsf) — furkan, Oct 22 '16 at 18:41
http://stackoverflow.com/q/38018632 should indeed fully answer your question. Is this true? It was mentioned in above comment of sunofkyuss, but you didn't post any feedback on it. — BalusC, Oct 26 '16 at 09:13
I haven't had the chance to test it yet, but the answer looks pretty promising. — sinclair, Oct 26 '16 at 15:29

sura2k · Answer 1 · 2016-10-27T14:23:06.077

0

It is already there in the showcase. http://www.primefaces.org/showcase/ui/file/upload/auto.xhtml

Need auto="true" to get this done.

Update:

Execute following javascript just after rendering the file upload div. Then you can drop allowed file types to anywhere in the page.

$('.ui-fileupload').fileupload({
      dropZone: $(document)
});

edited Oct 27 '16 at 14:23

answered Oct 27 '16 at 10:40

sura2k

7,365
13
61
80

2

This doesn't answer *"What I want is to upload files directly by dragging them anywhere into my page"* – BalusC Oct 27 '16 at 11:13
Uh, the question states that. Try reading the question (and all comments and other answers) before posting an answer/comment. – BalusC Oct 27 '16 at 11:36
`InputStream in = FileUploadEvent.getInputStream();` will have a pointer to the file – sura2k Oct 27 '16 at 11:43
2

OP already knows this all. OP just want to be able to upload a file by dragging it **anywhere** into the page instead of only into `` box. In question's comments you can find a link to another Q&A which has this already answered. – BalusC Oct 27 '16 at 12:52
2

Updated the answer. Now can drop them **anywhere** into the page and tested it. If this doesn't work, sorry that is all I can do. – sura2k Oct 27 '16 at 14:25

score -2 · Answer 2 · answered Oct 26 '16 at 07:03

-2

Did you try dragDropSupport="true"?

<p:fileUpload fileUploadListener="#{fileUploadView.handleFileUpload}" mode="advanced" dragDropSupport="true"
                      update="messages" sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />

It works very well for me.

answered Oct 26 '16 at 07:03

GBS

124
1
3
16

2

This doesn't answer *"What I want is to upload files directly by dragging them anywhere into my page"* – BalusC Oct 26 '16 at 09:12

JSF fileupload by dragging file anywhere into the page

2 Answers2