updated drag and drop area, allow for users to click to upload

frontend/css/styles.css

@@ -72,16 +72,17 @@ body {
   background-color: #f1f1f1;
 }
 
-button {
-  background-color: #4CAF50;
+#upload-button {
+  background-color: #ccc; /* Gray */
   color: white;
   padding: 10px 20px;
   border: none;
   border-radius: 4px;
-  cursor: pointer;
   font-size: 16px;
+  cursor: default; /* Default cursor */
 }
 
-button:hover {
-  background-color: #45a049;
+#upload-button:enabled {
+  background-color: #4CAF50; /* Green */
+  cursor: pointer; /* Pointer cursor */
 }

frontend/index.html

@@ -21,13 +21,14 @@
   <!-- Home Page (Upload) -->
   <div id="drag-drop-container">
     <h2>Drag and Drop Images</h2>
-    <p>Drop your PNG or JPEG files here</p>
-    <form id="upload-form" action="upload.php" method="POST" enctype="multipart/form-data">
+    <p>Drop your PNG or JPEG files here <br><br>or click to select a file</p>
+    <div id="file-info"></div>
     <input type="file" id="file-input" name="file" accept="image/png, image/jpeg" hidden>
-      <button type="submit">Upload</button>
-    </form>
   </div>
 
-  <script src="script.js"></script>
+  <br>
+  <button id="upload-button" type="button" disabled>Upload</button>
+
+  <script src="js/script.js"></script>
 </body>
 </html>

frontend/js/script.js

@@ -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';
+}

frontend/script.js

@@ -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();
-});