Dropzone: How to add a Remove button to right top corner of preview thumbnail

[ishara119]

How to add a Remove button to right top corner of preview thumbnail as bellow?

it would be appreciate if anyone can help me

regards
Thilanka

[jcaillot]

this might hopefully get you started

display the remove link

"addRemoveLinks": true,
"dictRemoveFile" : "×", // <-- this is not an "x" this is the multiplication sign (&time;)

than override the css like this:

.dz-remove
{
    display:inline-block !important;
    width:1.2em;
    height:1.2em;

    position:absolute;
    top:5px;
    right:5px;
    z-index:1000;

    font-size:1.2em !important;
    line-height:1em;

    text-align:center;
    font-weight:bold;
    border:1px solid gray !important;
    border-radius:1.2em;
    color:gray;
    background-color:white;
    opacity:.5;

}

.dz-remove:hover
{
    text-decoration:none !important;
    opacity:1;
}