document.addEventListener('DOMContentLoaded', function () {
const previewableFiles = document.querySelectorAll('.previewable-file');
previewableFiles.forEach(fileInput => {
fileInput.addEventListener('change', function (event) {
const previewContainerId = this.name + '-preview';
const previewContainer = document.getElementById(previewContainerId);
previewContainer.innerHTML = '';
const files = event.target.files;
Array.from(files).forEach(file => {
if (file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = function (e) {
const img = document.createElement('img');
img.src = e.target.result;
img.style.maxWidth = '150px';
img.style.margin = '5px';
img.style.border = '1px solid #ddd';
img.style.borderRadius = '5px';
previewContainer.appendChild(img);
};
reader.readAsDataURL(file);
}
});
});
});
});