Есть форма добавления картинки:
<div class="pic-container">
<div class="close-popup"></div>
<div id="dnd">
<form action="<?= admin_url('admin-post.php'); ?>" method="post" enctype="multipart/form-data">
<?php wp_nonce_field('regauthor_upload_file'); ?>
<input type="hidden" name="action" value="registration_author" />
<input type="hidden" name="redirect" value="<?= get_permalink(); ?>" />
<input type="hidden" name="formNum" value="2" />
<input id="fileElem" type="file" name="regauthor_upload_file" required />
<label class="button" for="fileElem">Кликните или перетащите изображение</label>
</form>
</div>
При добавлении картинки она с помощью js выводится на тут же в блоке div class="pic-container". Но при перетаскивании она нормально один раз выводится, а при добавлении через клик - 2 раза. Вот js код:
dnd.addEventListener('drop', event => {
event.preventDefault();
dnd.dataset.over = false;
const text = event.dataTransfer.getData("text");
if (text) {
let img = document.createElement('img');
img.src = text;
picCont.appendChild(img);
} else {
var files = event.dataTransfer.files;
[].map.call(files, file => {
if (file.type.match(/^image/)) {
let reader = new FileReader();
reader.onload = file => {
let img = document.createElement('img');
img.src = file.target.result;
picCont.appendChild(img);
dnd.style.display = 'none';
closePopup.style.display = 'block';
}
reader.readAsDataURL(file);
inputImg.files = files;
console.log(file);
}
})
}
});
dnd.addEventListener('click', () => {
inputImg.click();
inputImg.addEventListener('change', event => {
let curFiles = inputImg.files;
console.log(curFiles.length);
let reader = new FileReader();
[].map.call(curFiles, file => {
if (file.type.match(/^image/)) {
let reader = new FileReader();
reader.onload = file => {
let img = document.createElement('img');
img.src = file.target.result;
picCont.appendChild(img);
dnd.style.display = 'none';
closePopup.style.display = 'block';
}
reader.readAsDataURL(file);
console.log(file);
}
})
});
});
