78 lines
2.2 KiB
JavaScript
78 lines
2.2 KiB
JavaScript
|
const dragDropContainer = document.getElementById('drag-drop-container');
|
||
|
|
const fileInput = document.getElementById('file-input');
|
||
|
|
const uploadButton = document.getElementById('upload-button');
|
||
|
|
let selectedFile = null;
|
||
|
|
|
||
|
|
// Initially disable the upload button and set its background color to grey
|
||
|
|
disableUploadButton();
|
||
|
|
|
||
|
|
dragDropContainer.addEventListener('dragover', (event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
dragDropContainer.classList.add('drag-over');
|
||
|
|
});
|
||
|
|
|
||
|
|
dragDropContainer.addEventListener('dragleave', () => {
|
||
|
|
dragDropContainer.classList.remove('drag-over');
|
||
|
|
});
|
||
|
|
|
||
|
|
dragDropContainer.addEventListener('drop', (event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
dragDropContainer.classList.remove('drag-over');
|
||
|
|
|
||
|
|
// Get the first file from the dropped files
|
||
|
|
const file = event.dataTransfer.files[0];
|
||
|
|
|
||
|
|
// Check if the file is a PNG or JPEG
|
||
|
|
if (file.type === 'image/png' || file.type === 'image/jpeg') {
|
||
|
|
selectedFile = file;
|
||
|
|
updateFileInfo(file.name);
|
||
|
|
enableUploadButton();
|
||
|
|
} else {
|
||
|
|
alert('Please drop a PNG or JPEG file.');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
dragDropContainer.addEventListener('click', () => {
|
||
|
|
fileInput.click();
|
||
|
|
});
|
||
|
|
|
||
|
|
fileInput.addEventListener('change', () => {
|
||
|
|
const file = fileInput.files[0];
|
||
|
|
if (file && (file.type === 'image/png' || file.type === 'image/jpeg')) {
|
||
|
|
selectedFile = file;
|
||
|
|
updateFileInfo(file.name);
|
||
|
|
enableUploadButton();
|
||
|
|
} else {
|
||
|
|
updateFileInfo('');
|
||
|
|
disableUploadButton();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
uploadButton.addEventListener('click', () => {
|
||
|
|
if (selectedFile) {
|
||
|
|
const formData = new FormData();
|
||
|
|
formData.append('file', selectedFile);
|
||
|
|
// Send the formData to the server using fetch or XMLHttpRequest
|
||
|
|
// ...
|
||
|
|
console.log('Uploading file:', selectedFile.name);
|
||
|
|
} else {
|
||
|
|
alert('Please select a file to upload.');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function updateFileInfo(fileName) {
|
||
|
|
const fileInfo = document.getElementById('file-info');
|
||
|
|
fileInfo.textContent = fileName ? `Selected file: ${fileName}` : '';
|
||
|
|
}
|
||
|
|
|
||
|
|
function enableUploadButton() {
|
||
|
|
uploadButton.disabled = false;
|
||
|
|
uploadButton.style.backgroundColor = '#4CAF50'; // Green
|
||
|
|
uploadButton.style.cursor = 'pointer';
|
||
|
|
}
|
||
|
|
|
||
|
|
function disableUploadButton() {
|
||
|
|
uploadButton.disabled = true;
|
||
|
|
uploadButton.style.backgroundColor = '#ccc'; // Gray
|
||
|
|
uploadButton.style.cursor = 'default';
|
||
|
|
}
|