updated drag and drop area, allow for users to click to upload
This commit is contained in:
parent
9e388faeef
commit
5ae2d4236c
|
@ -72,16 +72,17 @@ body {
|
||||||
background-color: #f1f1f1;
|
background-color: #f1f1f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
#upload-button {
|
||||||
background-color: #4CAF50;
|
background-color: #ccc; /* Gray */
|
||||||
color: white;
|
color: white;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
cursor: default; /* Default cursor */
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
#upload-button:enabled {
|
||||||
background-color: #45a049;
|
background-color: #4CAF50; /* Green */
|
||||||
|
cursor: pointer; /* Pointer cursor */
|
||||||
}
|
}
|
|
@ -21,13 +21,14 @@
|
||||||
<!-- Home Page (Upload) -->
|
<!-- Home Page (Upload) -->
|
||||||
<div id="drag-drop-container">
|
<div id="drag-drop-container">
|
||||||
<h2>Drag and Drop Images</h2>
|
<h2>Drag and Drop Images</h2>
|
||||||
<p>Drop your PNG or JPEG files here</p>
|
<p>Drop your PNG or JPEG files here <br><br>or click to select a file</p>
|
||||||
<form id="upload-form" action="upload.php" method="POST" enctype="multipart/form-data">
|
<div id="file-info"></div>
|
||||||
<input type="file" id="file-input" name="file" accept="image/png, image/jpeg" hidden>
|
<input type="file" id="file-input" name="file" accept="image/png, image/jpeg" hidden>
|
||||||
<button type="submit">Upload</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="script.js"></script>
|
<br>
|
||||||
|
<button id="upload-button" type="button" disabled>Upload</button>
|
||||||
|
|
||||||
|
<script src="js/script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
78
frontend/js/script.js
Normal file
78
frontend/js/script.js
Normal file
|
@ -0,0 +1,78 @@
|
||||||
|
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';
|
||||||
|
}
|
|
@ -1,32 +0,0 @@
|
||||||
const dragDropContainer = document.getElementById('drag-drop-container');
|
|
||||||
const fileInput = document.getElementById('file-input');
|
|
||||||
const uploadForm = document.getElementById('upload-form');
|
|
||||||
|
|
||||||
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') {
|
|
||||||
fileInput.files = event.dataTransfer.files;
|
|
||||||
uploadForm.submit();
|
|
||||||
} else {
|
|
||||||
alert('Please drop a PNG or JPEG file.');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
dragDropContainer.addEventListener('click', () => {
|
|
||||||
fileInput.click();
|
|
||||||
});
|
|
Loading…
Reference in a new issue