.drop-file {
width: 400px;
margin: 0 auto;
}
.drop-file input {
display: none;
}
.drop-file .previews {
column-count: 3;
column-gap: 5px;
display: inline-block;
width: 100%;
margin-top: 10px;
}
.drop-file .preview-block {
border: 1px solid #bbb;
padding: 3px;
margin-bottom: 5px;
position: relative;
overflow: hidden;
background: #f1f1f1;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
break-inside: avoid-column;
}
.drop-file .preview-block .deleter {
background: red;
color: white;
text-align: center;
top: 0;
right: 0;
height: 15px;
width: 15px;
line-height: 13px;
font-size: 15px;
padding: 3px;
position: absolute;
text-transform: lowercase;
font-family: monospace;
cursor: pointer;
}
.drop-file .preview-block img {
width: 100%;
}
#drop_zone {
position: relative;
padding: 25px;
text-align: center;
color: #bbb;
border: 1px solid #bbb;
z-index: 9;
}
#drop_zone:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: calc(100% - 15px);
height: calc(100% - 15px);
border: 2px dashed #bbb;
z-index: -1;
border-radius: 4px;
}
#drop_zone.drag-over:before {
border-color: green;
}
#drop_zone .text {
padding-bottom: 5px;
}
#drop_zone .label {
padding-top: 5px;
display: inline-block;;
width: 100%;
}
#drop_zone label {
color: #009fff;
font-weight: 600;
z-index: 99;
margin: 0;
background: white;
padding: 5px 10px;
height: auto;
border: 1px solid #ccc;
cursor: pointer;
display: inline-block;
}
#drop_zone label.drag-over {
background: #e9f8ff;
}
<div class="drop-file">
<div id="drop_zone">
<div clasS="text">Trascina file qui oppure</div>
<div class="label">
<label class="img-input" for="img-input">Cerca file</label>
</div>
</div>
<input class="img-input hidden" type="file" id="img-input" accept="image/*,audio/*,video/*,.doc,.docx,.xls,.rtf,.pdf,.txt" multiple>
<div class="previews"></div>
</div>
var fileUploadField = function() {
var $this = this;
this.previews = [];
this.handlers = function() {
$('#drop_zone').on('dragover dragenter', function (e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass('drag-over');
});
$('#drop_zone').on('dragleave drop', function (e) {
e.preventDefault();
e.stopPropagation();
$(this).removeClass('drag-over');
});
$('#drop_zone').on('drop', function (e) {
var dt = e.originalEvent.dataTransfer;
$this.readImage(dt);
});
$('.drop-file input[type="file"]').on('change', function (e) {
var dt = e.target;
$this.readImage(dt);
});
$(document).on('click','.drop-file .deleter', function(e) {
var id = $(this).data('id');
$this.previews = $this.previews.filter(function(preview) {
return preview.size !== id;
});;
$(this).parent().remove();
})
}
this.readImage = function(transferData) {
var files = transferData.files;
Array.prototype.forEach.call(files, function(file){
var reader = new FileReader();
reader.onload = function (e) {
file["base64"] = reader.result;
$this.previews.push(file);
$('.drop-file .previews').html($('.drop-file .previews').html()+'<div class="preview-block"><div class="deleter" data-id="'+file.size+'">X</div><img src="'+reader.result+'"></div>');
};
reader.readAsDataURL(file);
});
}
this.init = function() {
$this.handlers();
}
this.init();
};
var testFileUploadField = new fileUploadField();