Home/ Questions/Q 9062865
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T15:50:40+00:00

I’m making a wicket app that can manage some options for a cashdesk app.

  • 0

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.

The user(manager) can choose from the already present images in the database (SQL) when this option is selected, or add a new image if the desired image is not present.
Don't mention the test names and awesome images (it's still in test-fase)Don’t mention the test names and awesome images (it’s still in test-fase)

I prefer to see the adding of an image achieved by Drag and Drop
html5 demo [dnd-upload]
(From the desktop into the browser)

I’m currently using Wicket-6.2.0 and wicket-dnd 0.5.0 and i can’t seem to get this working! All examples I can find are from wicket 2.x or lower.

It is possible to use drag and drop in Wicket-6.2, but how do I achieve this?

There seems to be some DraggableBehavior in wicket? Any help is welcome!

[UPDATE]

Upgraded to wicket-dnd 0.6

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    <!DOCTYPE html>
<html lang="en">
<body>
    <wicket:extend>
        // The following line adds a DropZone
        <div wicket:id="dropZone"></div>
    </wicket:extend>
</body>
</html>

    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<String>("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

    <html>
<body>
    <wicket:panel>
        <div wicket:id="drop-container" id="dropContainer">
            <div id="dropAppearance">
                <p>
                    <wicket:message key="drop-message">[DROPZONE MESSAGE]</wicket:message>
                </p>
            </div>
        </div>
    </wicket:panel>
</body>

    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:<NAME>;data:<TYPE>;base64,<FILEDATA>
            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:

            // <parent element>
            // dragging = 0
            // <drop_container>
            // dragging = 1
            // <child>
            // dragging = 2
            // </child>
            // dragging = 1
            // </drop_container>
            // dragging = 0
            // </parent element>

            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);
    }
}
    • 0