No files selected.
';
const files = event.target.files;
if (!files.length) {
return; // No files selected
}
// Remove the "No files selected." paragraph if files are present
if (previewArea.querySelector('p')) {
previewArea.innerHTML = '';
}
for (const file of files) {
// Basic validation: ensure it's an image and not too large
if (!file.type.startsWith('image/')) {
console.warn(`Skipping non-image file: ${file.name}`);
continue;
}
if (file.size > 5 * 1024 * 1024) { // 5MB limit
console.warn(`Skipping large file (>${5}MB): ${file.name}`);
continue;
}
const reader = new FileReader();
reader.onload = (e) => {
const img = document.createElement('img');
img.src = e.target.result;
img.alt = `Preview of ${file.name}`;
img.classList.add('preview-image');
previewArea.appendChild(img);
};
reader.onerror = (e) => {
console.error(`Error reading file ${file.name}:`, e.target.error);
const errorDiv = document.createElement('div');
errorDiv.textContent = `Could not preview ${file.name}.`;
errorDiv.style.color = 'red';
previewArea.appendChild(errorDiv);
};
reader.readAsDataURL(file); // Start reading the file
}
}
});
```
This script first gets references to the input and preview elements. It then attaches a `change` event listener to the file input. When files are selected, `handleFiles` is called. This function clears any existing previews, iterates through each selected file, performs basic type and size validation, and then creates a new `FileReader` instance for each valid file. The `reader.onload` callback creates an `