I have an image upload drag/drop box that that accepts and previews uploaded content (no auto upload until form is submitted). this upload box appears more than once in a page and it works fine but controlling one item affects the whole drag/drop box the same way.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.image-upload-wrap').hide();
$('.file-upload-image').attr('src', e.target.result);
$('.file-upload-content').show();
$('.image-title').html(input.files[0].name);
};
reader.readAsDataURL(input.files[0]);
} else {
removeUpload();
}
}
function removeUpload() {
$('.file-upload-input').replaceWith($('.file-upload-input').clone());
$('.file-upload-content').hide();
$('.image-upload-wrap').show();
}
$('.image-upload-wrap').bind('dragover', function() {
$('.image-upload-wrap').addClass('image-dropping');
});
$('.image-upload-wrap').bind('dragleave', function() {
$('.image-upload-wrap').removeClass('image-dropping');
});.file-upload-content {
display: none;
text-align: center;
margin-top: 20px;
border: 1px dashed #b1becc;
position: relative;
border-radius: 5px;
background: #e0e8f3;
}
.file-upload-input {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
cursor: pointer;
}
.image-upload-wrap {
margin-top: 20px;
border: 1px dashed #b1becc;
position: relative;
border-radius: 5px;
background: #e0e8f3;
padding: 50px 0 20px;
}
.image-dropping,
.image-upload-wrap:hover {
background-color: #ccd6e4;
;
border: 1px dashed #b1becc;
}
.image-title-wrap {
padding: 0 15px 15px 15px;
color: #222;
}
.file-upload-image {
max-height: 200px;
max-width: 200px;
margin: auto;
padding: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><div class="upload-box"><div class="file-upload"><div class="image-upload-wrap"><input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" /><div class="dz-message text-center" data-dz-message=""><span class="dz-message-text">Drag and drop a file</span><span class="dz-message-or">Or</span><button class="btn btn-primary" type="button" onclick="$('.file-upload-input').trigger( 'click' )">Select File</button></div></div><div class="file-upload-content"><img class="file-upload-image" src="#" alt="your image" /><div class="image-title dz-filename"> </div><div class="image-title-wrap"><button type="button" onclick="removeUpload()" class="btn btn-danger">Remove</button></div></div></div></div>