Drag&Drop with Dropzone.js and Tapestry 4

Question

I am looking for some ideas how to handle drag&drop (DD) with DropZone.js (DZ) and Tapestry 4 (T4). Since T4 is not able to handle DD nativly on the server-side, I have to find some workaround. Yesterday I came across DZ which is a quite nice script for client-side DD.

Here I will show my current page, which is able to handle DD on the client-side and afterwards I will explain what I am trying to reach.

Drag&Drop

After the user dropped some files into the appropriate div and then cklicks the button "Upload Files" the table below should be updated with the uploaded files. But the following problems occur:

Tapestry 4 cant handle DD on the server-side
our Tomcat cant handle PHP for the file uploading

The DD part of my HTML file is:

<button id="clear-dropbox" class="FileButtons">Clear Dropzone</button>
<button id="upload-files" class="FileButtons">Upload Files</button>

<div id="dropbox" ><span id="droplabel">Drop file here...</span>
</div>

<script type="text/javascript">

            $jQuery(document).ready(function()
            {       
                var dropbox = new Dropzone("div#dropbox", { url: "php/upload.php"});
                document.querySelector("#dropbox").classList.add("dropzone");
            } );

            Dropzone.options.dropbox = {

                init: function() {

                var myDropbox = this;

                  var deleteButton = document.querySelector("#clear-dropbox");
                  var uploadButton = document.querySelector("#upload-files");

                  deleteButton.addEventListener("click", function() {
                    myDropbox .removeAllFiles(true);
                  });

                  uploadButton.addEventListener("click", function() {
                        console.log(myDropbox.files);

                  });   
                }
              };

        </script>

When clicking on the Upload button, the upload event listener prints out the files correctly (absolut paths, names and so on). If TomCat would support PHP, then I could use the $_FILES session variable in the php script to upload a file (Upload a file with PHP). But unfortunately that is not possible.

What I could imagine is that I use an invisible upload component from T4. But there I would have to find a way to set each file from the dropzone to the upload component, but I am not shure if this is a good solution.

EDIT: As said here: JavaScript - No setting of file input value It is not possible to set the value of an input field with JavaScript, so this idea to use one or more invisible fileds input fields is obsolete.

Upload file

As a summary I want to achive that the files being dropped to the dropzone are sent to the server. At first they should not be directly stored to the server as files but they have to be available in my Java class for the appropriate T4 page. I want to handle the files in seperate ways (creating an own FileHelper object, that can be used to show the files in the table you can see in the picture above and other things) Can anyone help me with giving me some input for the server-side drag&drop?

aldux aldux · Accepted Answer · 2013-07-04T18:29:37

First and foremost, you have to understand how an client-server-side works. What happens on the client side is completely unknown to the server until it gets a request from the client. So there's no drag'n'drop on the server side. What your javascript plugin does is arrange the files in a certain way, and then, send them away to the server.

In your code snippet, you are using a PHP script to handle the file upload. What you need to find is a java wrapper to handle the plugin POST requests. If it is not supplied by the plugin developer you can build your own using java I/O, even using the PHP script as a recipe.

You can find tons of tutorials on Java file uploading and tapestry file upload as well. I suggest you take a look at one of those before takling with this Javascript plugin.

Drag&Drop with Dropzone.js and Tapestry 4

1 Answers