This post presents lib-gwt-file, a library which encapsulates the W3C File API and the HTML5 drag-and-drop interfaces.
Let me begin by explaining why I developed this library and how I expect it to evolve. I am currently developing an SVG editor based on GWT and lib-gwt-svg and to be truly useful, users need to be able to update the drawings they have on their own computer. I came across a mozilla article presenting the file API support they have built into FF3.6 and FF4. This was exactly what I needed, except I needed it in GWT form. I read the specs (W3C file API and HTML drag-and-drop) and implemented what I needed to cover my needs. It then appeared to me that other developers would probably have this need too and that it would be mutually beneficial to share this code.
I do not expect this library to live a very long life. The specifications are still in draft stage, but the GWT team will probably implement it in a not too distant future (2012 ?) as the feature is general enough and important enough to make it into GWT; they are probably waiting for the spec to mature a bit and the other browser vendors (opera, microsoft) to implement it. Until they do, you can rely on lib-gwt-file to implement your local file open functionality. Migration to the official GWT API once it exists should not be too difficult.
At the moment the lib is not very well documented or tested (version 0.1), but I am using it and it works for me. You can look at the project page for details. There is a sample with code source available. It runs in FF4 and Chromium. Note that the code is compatible with GWT UiBinder: it declares new event classes and you can use the standard UiBinder event hookup facility to automatically register for these events (this is what the sample does).
Would it be possible to couple lib-gwt-file with gwtupload, for drag & drop uploading of files?
http://code.google.com/p/gwtupload/wiki/GwtUpload_GettingStarted
Cheers,
J
Thanks for sharing this project, but I’ve not really been able to use it for lack of sample code. I experimented by using a DropPanel on which I added a DragEnterHandler and a DropHandler, however when I drag a picture from my system into the DropPanel the browser just replaces my page / app and displays the picture.
Please is there sample code (not API docs) that I can look at or could you share the source for the sample app at http://www.vectomatic.org/gwt/lib-gwt-file-test/lib-gwt-file-test.html
Thanks a bunch.
Hi Odili Charles Opute,
The problem probably comes from not setting a handler for the dragover
event to cancel the default browser behavior (if you don’t, the
default browser behavior kicks in and you get the result you
describe).
The source code for the example is available on my website:
http://www.vectomatic.org/libs/lib-gwt-file (or to be precise:
http://www.vectomatic.org/mvn-sites/lib-gwt-file-test/xref/index.html
for the online cross-ref and
http://www.vectomatic.org/mvn/org/vectomatic/lib-gwt-file-test/ for
the maven repository).
Regards
Lukas
PS: If you have questions it is better to ask them on the lib-gwt-file
google group (http://code.google.com/p/lib-gwt-file/)