Wicket Drag and drop functionality for adding an image

Question

I\'m making a wicket app that can manage some options for a cashdesk app. One of the options is to change the image of a selected Product.

Answer 1

So here is the answer as promised! (only code but easy to understand if you are familiar with wicket)

The code makes it possible to drag a file to an area, and sends it to the wicket server (no matter what file it gets) this is not always what you want (but only what I need).

add the following javascript check in the drop.js if you only want 1 type of file to be uploaded:

// For each file: check if files are images
for (i = 0; i < files.length; i++) {
    if (!files[i].type.match('image.*')) { // Replace with what you need
        $('#dropAppearance p').html('Hey! Images only');
        return false;
    }
}

files:
- MyPage.java
- MyPage.html
- DropZone.java
- DropZone.html
- DropZone.properties
- DropAjaxBehavior
- drop.js
- drop.css

Used Libs:
- jQuery.js
- jQuery-ui.js
- wicket 6.2
- slf4j-1.2.16
- log4j-1.2.16
- guava-13.0.1

I did not included the imports because, i'm lazy

MyPage.java

public final class MyPage extends Page {

    /**
     * Constructor
     */
    public HomePage() {
    }

    @Override
    public void onInitialize() {
        super.onInitialize();
        add(new DropZone("dropZone", 300, 200));
    }
}

MyPage.html

    
        // The following line adds a DropZone
        

    

DropZone.java

public class DropZone extends Panel {
    private static final ResourceReference JS_DROP = new JavaScriptResourceReference(DropZone.class, "drop.js");
    private static final ResourceReference CSS_DROP = new CssResourceReference(DropZone.class, "drop.css");
    private static final ResourceReference JQUERY = new JavaScriptResourceReference(DropZone.class, "jQuery.js");
    private static final ResourceReference JQUERY_UI = new JavaScriptResourceReference(DropZone.class, "jQuery-ui.js");

    private static final String ID_DROPZONE = "drop-container";

    /**
     * Constructor
     * 
     * @param id String The component id
     * @param height int The height of the DropZone component [in pixels]
     * @param width int The width of the DropZone component [in pixels]
     */
    public DropZone(String id, int width, int height) {
        super(id);
        final WebMarkupContainer dropZone = new WebMarkupContainer(ID_DROPZONE);
        final DropAjaxBehavior dropAjaxBehavior = new DropAjaxBehavior();

        dropZone.add(dropAjaxBehavior);
        dropZone.add(new AttributeModifier("style", new Model("width:" + width + "px;height:" + height + "px;")));

        add(dropZone);
    }

    @Override
    public final void renderHead(IHeaderResponse response) {
        super.renderHead(response);
        // Important to add jQuery before own javascript
        response.render(JavaScriptHeaderItem.forReference(JQUERY));
        response.render(JavaScriptHeaderItem.forReference(JQUERY_UI));
        response.render(JavaScriptHeaderItem.forReference(JS_DROP));
        response.render(CssContentHeaderItem.forReference(CSS_DROP));
    }
}

DropZone.html

    
        

            

                

                    [DROPZONE MESSAGE]
                
            
        
    

DropZone.properties

drop-message = Drop Files Here

DropAjaxBehavior.java

public class DropAjaxBehavior extends AbstractAjaxBehavior {
    private static final Logger LOG = LoggerFactory.getLogger(DropAjaxBehavior.class);

    @Override
    public final void onRequest() {
        LOG.debug("Received request");

        final RequestCycle requestCycle = RequestCycle.get();

        processRequest(requestCycle);
        sendResponse(requestCycle);
    }

    private void processRequest(RequestCycle requestCycle) {

        final WebRequest wr = (WebRequest)requestCycle.getRequest();
        final HttpServletRequest hsr = (HttpServletRequest)wr.getContainerRequest();

        try {
            final byte[] data = new byte[hsr.getContentLength()];
            ByteStreams.readFully(hsr.getInputStream(), data);

            // filename:;data:;base64,
            final String[] base64Data = new String(data).split(";");
            final String fileName = base64Data[0].substring(base64Data[0].indexOf(':') + 1, base64Data[0].length());
            final String dataType = base64Data[1].substring(base64Data[1].indexOf(':') + 1, base64Data[1].length());
            final String binaryData = base64Data[2].substring(base64Data[2].indexOf(',') + 1, base64Data[2].length());

            // [in my case] do something if the fileType is an image
            if (dataType.contains("image")) {
                final byte[] image = DatatypeConverter.parseBase64Binary(binaryData);
                DatabaseQuery.addImage(image, fileName);
            }
            // But you can make a local file
            // final File file = new File(fileName);
            // final ByteArrayInputStream binaryInputstream = new ByteArrayInputStream(image);
            // final FileOutputStream outputStream = new FileOutputStream(file);
            // ByteStreams.copy(binaryInputstream, outputStream);
            // outputStream.close();
        } catch (IOException ioe) {
            LOG.error("IO error while reading HttpServletRequest: ", ioe);
        }
    }

    private void sendResponse(RequestCycle requestCycle) {
        // Just some response
        requestCycle.scheduleRequestHandlerAfterCurrent(new TextRequestHandler("text/html", "UTF-8", "done"));
    }

    @Override
    protected final void onComponentTag(ComponentTag tag) {
        tag.put("my:dropcontainer.callback", getCallbackUrl().toString());
    }
}

drop.css

#dropContainer {
    background-color: #FFFFFF;
    border: 4px dashed #C9C9C9;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
}

#dropAppearance {
    height: 100%;
    width: 100%;
    display: table;
    box-sizing: border-box;
}

#dropAppearance p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 2em;
    color: #797979;
}

drop.js

$(document).ready(
        function() {
            // Makes sure the dataTransfer information is sent when we
            // Drop the item in the drop box.
            jQuery.event.props.push('dataTransfer');

            // As far as i know Firefox needs to cancel this event (otherwise it
            // opens
            // dropped files in the browser)
            $('#dropContainer').attr('ondragover', "return false");

            $('#dropContainer').bind(
                    'drop',
                    function(e) {
                        // Files that have been dragged into the drop area
                        var files = e.dataTransfer.files;

                        // Upload each file
                        $.each(files, function(i, file) {
                            var reader = new FileReader();

                            reader.onload = function(input) {
                                var fileName = "fileName:" + file.name + ";";
                                var base64data = input.target.result;

                                $.ajax({
                                    url : $('#dropContainer').attr(
                                            'my:dropcontainer.callback'),
                                    type : 'post',
                                    cache : false,
                                    // Add date before raw base64 file data
                                    data : fileName + base64data,
                                    processData : false,
                                    contentType : false,
                                });
                            };

                            // decode into base64
                            reader.readAsDataURL(file);
                        });
                        return false;
                    });

            // Using little dragging hack because of the HTML5 spec problem
            // URL:
            // http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html
            // works like:

            // 
            // dragging = 0
            // 
            // dragging = 1
            // 
            // dragging = 2
            // 
            // dragging = 1
            // 
            // dragging = 0
            // 

            var dragging = 0;
            $('#dropContainer').bind('dragenter', function() {
                dragging++;
                setHoverDropContainer();
                return false;
            });

            $('#dropContainer').bind('dragleave', function() {
                dragging--;
                if (dragging === 0) {
                    resetHoverDropContainer();
                }
                return false;
            });

            $('#dropContainer').bind('drop', function() {
                dragging = 0; // reset dragging hack
                resetHoverDropContainer();
                return false;
            });
        });

    function setHoverDropContainer() {
        // change colors with smooth transition
        setCSS('#dropContainer', {
            'border-color' : '#0000FF',
            'background-color' : '#EDF4FE',
            '-webkit-transition' : 'background-color 0.6s ease',
            '-moz-transition' : 'background-color 0.6s ease',
            '-o-transition' : 'background-color 0.6s ease',
            'transition' : 'background-color 0.6s ease',
            '-webkit-transition' : 'border-color 0.6s ease',
            '-moz-transition' : 'border-color 0.6s ease',
            '-o-transition' : 'border-color 0.6s ease',
            'transition' : 'border-color 0.6s ease'
        });
    }

    function resetHoverDropContainer() {
        // change colors with smooth transition
        setCSS('#dropContainer', {
            'border-color' : '#C9C9C9',
            'background-color' : '#FFFFFF',
            '-webkit-transition' : 'background-color 0.6s ease',
            '-moz-transition' : 'background-color 0.6s ease',
            '-o-transition' : 'background-color 0.6s ease',
            'transition' : 'background-color 0.6s ease',
            '-webkit-transition' : 'border-color 0.6s ease',
            '-moz-transition' : 'border-color 0.6s ease',
            '-o-transition' : 'border-color 0.6s ease',
            'transition' : 'border-color 0.6s ease'
        });
    }

    function setCSS(element, values) {
        $(element).css(values);
    }
}