0

I have implemented the file upload using rich:upload tag, now the new requirement is to make it accept drag-drop a file from a folder, then trigger the file upload process.

My question is how to implement this? Regardless Html5, jQuery etc, just implement it.

If it could be integrated to richfaces, e.g. once a drag event received, I can trigger the rich:upload with something like jQuery etc. that is best.

The project web framework is richfaces + jsf.

Thank you in advance.

Addition: Here is a jquery file upload demo

Community
  • 1
  • 1
khuang
  • 41
  • 8
  • Try this ,http://docs.jboss.org/richfaces/latest_4_X/Component_Reference/en-US/html/chap-Component_Reference-Drag_and_drop.html – Abin Manathoor Devasia Dec 27 '12 at 14:03
  • I looked this feature before, I am just not sure how to integrate it to , once an drag event received, how can I trigger it? If could be, that is the best solution for me :) – khuang Dec 28 '12 at 01:51

1 Answers1

1

Here you have an example showing how to use the File API.

basically, you have to use the ondrop event and the FileReader object:

<div id='holder'></div>
<script>
    var holder = document.getElementById('holder');
    holder.ondrop = function (e) {
        var file = e.dataTransfer.files[0],
            reader = new FileReader();

        reader.onload = function (event) {
            // your file info
            console.log(event.target);
        };

        // do read
        reader.readAsDataURL(file);

        return false;
    };
</script>
lante
  • 7,192
  • 4
  • 37
  • 57