Image preview in Dropzone.js
I have a problem with positioning preview images inside dropzones when dropping them. I installed dropzone with blue border. When I drag an image into it, its preview shifts slightly to the right and right. As a result, I only see the blue border of the zone at the top and left, while the preview runs along the right and bottom lines. I would like the preview image to hit exactly the drop zone, but cannot find a way to do it correctly.
Any idea? Here is an excerpt from the CSS code below - a bit long as I am having trouble figuring out where the issue is mentioned ... Thanks in advance for your help!
.dropzone {
position: relative;
/* border: 1px solid rgba(0,0,0,0.08);
background: rgba(0,0,0,0.02);
padding: 1em;*/
}
/* *****CHAMP CADRE BLANC***** */
.dropzone .dz-preview,
.dropzone-previews .dz-preview {
background: rgba(255,255,255,0.8);
position: relative;
display: inline-block;
margin: 0px;
vertical-align: top;
border: none;
padding: 0px 0px 0px 0px;
}
/* *****CHAMP CADRE BLANC***** */
.dropzone .dz-preview .dz-details,
.dropzone-previews .dz-preview .dz-details {
width: 70px; /*******/
height: 70px; /*******/
position: relative;
background: #ebebeb;
padding: 0px;
margin-bottom: 0px;
}
.dropzone .dz-preview .dz-details .dz-filename,
.dropzone-previews .dz-preview .dz-details .dz-filename {
overflow: hidden;
height: 100%;
}
/* *****CHAMP IMAGE UPLOADEE***** */
.dropzone .dz-preview .dz-details img,
.dropzone-previews .dz-preview .dz-details img {
position: absolute;
top: 0;
left: 0;
width: 70px; /*******/
height: 70px; /*******/
-webkit-border-radius: 3px;
border-radius: 3px;
}
/* *****CHAMP CHECKMARK***** */
.dropzone .dz-preview .dz-success-mark,
.dropzone-previews .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark,
.dropzone-previews .dz-preview .dz-error-mark {
display: none;
position: absolute;
width: 40px;
height: 40px;
font-size: 30px;
text-align: center;
right: -39px; /*******/
top: 32px; /*******/
}
.dropzone .dz-preview .dz-progress,
.dropzone-previews .dz-preview .dz-progress {
position: absolute;
top: 10px;
left: 6px;
right: 6px;
height: 6px;
background: #d7d7d7;
display: none;
}
.dropzone .dz-preview .dz-progress .dz-upload,
.dropzone-previews .dz-preview .dz-progress .dz-upload {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 0%;
background-color: #8cc657;
}
.dropzone .dz-preview .dz-error-message,
.dropzone-previews .dz-preview .dz-error-message {
display: none;
position: absolute;
top: -5px;
left: -20px;
background: rgba(245,245,245,0.8);
padding: 8px 10px;
color: #800;
min-width: 140px;
max-width: 500px;
z-index: 500;
}
/* *****CHAMP DROPZONE***** */
.dropzone {
border: 1px solid #256EB8;
/*min-height: 360px;*/
height:70px;
width:70px;
-webkit-border-radius: 3px;
border-radius: 3px;
/*background: blue;*/
background-image: url("MY_IMAGE.png");
padding: 0px;
margin:0px;
}
/* *****CHAMP DROPZONE MESSAGE ACCUEIL***** */
.dropzone .dz-default.dz-message {
opacity: 1;
background-image: url("../images/spritemap.png");
/*background-repeat: no-repeat;
background-position: 0 0;*/
position: absolute;
width: 70px; /*******/
height: 70px; /*******/
/*margin-left: -214px;
margin-top: -61.5px;
top: 50%;
left: 50%;*/
}
@media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
.dropzone .dz-default.dz-message {
background-image: url("MY_IMAGE.png");
-webkit-background-size: 428px 406px;
-moz-background-size: 428px 406px;
background-size: 428px 406px;
}
}
/*.dropzone .dz-preview,
.dropzone-previews .dz-preview {
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.16);
box-shadow: 1px 1px 4px rgba(0,0,0,0.16);
}*/
source to share
If you want to upload a single image, without changing the dropzone css, there are ways to do what you want. You can set the size of the "blue border" image receiving area and set the size proportional to the image above the "blue border" area. Consider the css padding from dropzone.css Ex:
The "blue border area" can be => width: 1200px and height: 400px, then:
myDropzone = new Dropzone('#dropzone-form',
{
url : 'upload_usuario.php?id_usuario='+id_usuario,
addRemoveLinks : true,
dictRemoveFile : 'delete',
maxFiles : 1, //just send one file
thumbnailWidth: 1140,//the "size of image" width at px
thumbnailHeight: 380,//the "size of image" height at px
dictDefaultMessage: 'Some text here as the ratio of the image to upload Ex: 1140 x 380',
init: function()
{
this.on("maxfilesexceeded", function(file)
{
this.removeAllFiles();
this.addFile(file);
});
//more code here.. bla bla
source to share