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

Based on your code I wrote my custom Ajax behavior. I simplified it however, it is working for me without dragging hack.

AbstractFileDropAjaxBehavior.java

public abstract class AbstractFileDropAjaxBehavior extends AbstractDefaultAjaxBehavior
{

    @Override
    protected void respond(final AjaxRequestTarget target)
    {
        RequestCycle requestCycle = RequestCycle.get();

        StringValue data = requestCycle.getRequest().getRequestParameters().getParameterValue("data");
        String[] base64Data = data.toString().split(";");
        String fileName = base64Data[0].substring(base64Data[0].indexOf(':') + 1, base64Data[0].length());
        String dataType = base64Data[1].substring(base64Data[1].indexOf(':') + 1, base64Data[1].length());
        String binaryData = base64Data[2].substring(base64Data[2].indexOf(',') + 1, base64Data[2].length());
        byte[] rawData = DatatypeConverter.parseBase64Binary(binaryData);

        processFile(fileName, dataType, rawData);
    }

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

        tag.put("ondragover", "return false;");
        tag.put("ondrop", "return AbstractFileDropAjaxBehavior_upload(event, '#" + tag.getId() + "');");
        tag.put("ondragenter", "$('#" + tag.getId() + "').addClass('dropover')");
        tag.put("ondragleave", "$('#" + tag.getId() + "').removeClass('dropover')");
    }

    @Override
    public void renderHead(Component component, IHeaderResponse response) {
        super.renderHead(component, response);

        response.render(OnDomReadyHeaderItem.forScript("jQuery.event.props.push('dataTransfer');"));

        response.render(JavaScriptContentHeaderItem.forScript("function AbstractFileDropAjaxBehavior_upload(e, selector) {\n" + 
                "   var files = e.dataTransfer.files;\n" + 
                "   \n" + 
                "   $.each(files, function(i, file) {\n" + 
                "       var reader = new FileReader();\n" + 
                "       \n" + 
                "       reader.onload = function(input) {\n" + 
                "           var fileName = \"fileName:\" + file.name + \";\";\n" + 
                "           var base64data = input.target.result;\n" + 
                "           \n" + 
                "           Wicket.Ajax.post({\n" + 
                "               \"u\": $(selector).attr('my:dropcontainer.callback'),\n" + 
                "               \"ep\": {\n" + 
                "                   \"data\" : fileName + base64data,\n" + 
                "               },\n" + 
                "           });\n" + 
                "           \n" + 
                "       };\n" + 
                "\n" + 
                "       reader.readAsDataURL(file);\n" + 
                "   });\n" + 
                "   \n" + 
                "   $(selector).removeClass('dropover');\n" + 
                "   \n" + 
                "   return false;   \n" + 
                "}\n", "AbstractFileDropAjaxBehavior-script"));
    }

    protected abstract void processFile(String fileName, String dataType, byte[] rawData);

}