Open Source & Free  

Drag and Drop Uploader

Drag and Drop Uploader

Header Image

One of our enterprise customers needed help with file upload from the desktop. E.g. in his Codename One app running in the browser or desktop he wanted the ability to drag a file. Somewhat like we can drag a file into gmails compose window.

This doesn’t make sense within Codename One as something like that doesn’t exist on mobile devices or even tablets. Creating a cn1lib that implements this functionality does make sense, so Steve did just that.

You can get started by installing the library using our extension manager tool.

Check out the live demo here on the right side, drag an image into the phone simulator to add it to the form.

I chose to use a phone skin out of habit but this obviously isn’t useful for actual devices…​

This is the code that makes it all happen:

Form hi = new Form("Drag and Drop Demo");

if (DropTarget.isSupported()) {
    DropTarget dnd = DropTarget.create((evt)->{
        String srcFile = (String)evt.getSource();
        System.out.println("Src file is "+srcFile);
        System.out.println("Location: "+evt.getX()+", "+evt.getY());
        if (srcFile != null) {
            try {
                Image img = Image.createImage(FileSystemStorage.getInstance().openInputStream(srcFile));
                hi.add(img);
                hi.revalidate();
            } catch (IOException ex) {
                Log.e(ex);
            }
        }
    }, Display.GALLERY_IMAGE);
}
hi.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
hi.setScrollableY(true);
hi.addComponent(new SpanLabel("Drag photos from your desktop into this app"));
hi.show();

Leave a Reply