78 lines
2.8 KiB
JavaScript
78 lines
2.8 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const fileInput = document.getElementById('file-input');
|
|
const uploadUi = document.getElementById('upload-ui');
|
|
const imageUploader = document.getElementById('image-uploader');
|
|
const imagePreviewContainer = document.getElementById('image-preview-container');
|
|
const imagePreview = document.getElementById('image-preview');
|
|
const clearImageBtn = document.getElementById('clear-image-btn');
|
|
const generationControls = document.getElementById('generation-controls');
|
|
|
|
// Trigger file input click
|
|
if(uploadUi) {
|
|
uploadUi.addEventListener('click', () => fileInput.click());
|
|
}
|
|
|
|
// Handle file selection
|
|
if(fileInput) {
|
|
fileInput.addEventListener('change', (event) => {
|
|
const files = event.target.files;
|
|
if (files && files.length > 0) {
|
|
handleFile(files[0]);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Handle drag and drop
|
|
if(imageUploader) {
|
|
imageUploader.addEventListener('dragover', (event) => {
|
|
event.preventDefault();
|
|
uploadUi.style.backgroundColor = '#f1f3f5';
|
|
uploadUi.style.borderColor = 'var(--primary-color)';
|
|
});
|
|
|
|
imageUploader.addEventListener('dragleave', (event) => {
|
|
event.preventDefault();
|
|
uploadUi.style.backgroundColor = 'transparent';
|
|
uploadUi.style.borderColor = '#dee2e6';
|
|
});
|
|
|
|
imageUploader.addEventListener('drop', (event) => {
|
|
event.preventDefault();
|
|
uploadUi.style.backgroundColor = 'transparent';
|
|
uploadUi.style.borderColor = '#dee2e6';
|
|
const files = event.dataTransfer.files;
|
|
if (files && files.length > 0) {
|
|
fileInput.files = files; // Assign dropped files to input
|
|
handleFile(files[0]);
|
|
}
|
|
});
|
|
}
|
|
|
|
function handleFile(file) {
|
|
if (!file.type.startsWith('image/')) {
|
|
alert('Please select an image file (PNG, JPG).');
|
|
return;
|
|
}
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
imagePreview.src = e.target.result;
|
|
imageUploader.classList.add('d-none');
|
|
imagePreviewContainer.classList.remove('d-none');
|
|
// In a future step, we can enable the controls:
|
|
// generationControls.disabled = false;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
// Handle clear image
|
|
if(clearImageBtn) {
|
|
clearImageBtn.addEventListener('click', () => {
|
|
fileInput.value = ''; // Clear the file input
|
|
imagePreview.src = '#';
|
|
imagePreviewContainer.classList.add('d-none');
|
|
imageUploader.classList.remove('d-none');
|
|
// generationControls.disabled = true;
|
|
});
|
|
}
|
|
}); |