From 7842bb1a94db102e73b06ce9d5522e359d5f52f4 Mon Sep 17 00:00:00 2001
From: Toddeh <alexandertoddeh@gmail.com>
Date: Sat, 13 Apr 2024 22:25:44 -0700
Subject: [PATCH] added upload php script, need db name and pass

---
 frontend/js/script.js | 104 +++++++++++++++++++++++-------------------
 frontend/upload.php   |  52 +++++++++++++++++++++
 2 files changed, 110 insertions(+), 46 deletions(-)
 create mode 100644 frontend/upload.php

diff --git a/frontend/js/script.js b/frontend/js/script.js
index e5c0c9e..d3464ad 100644
--- a/frontend/js/script.js
+++ b/frontend/js/script.js
@@ -7,76 +7,88 @@ let selectedFile = null;
 disableUploadButton();
 
 dragDropContainer.addEventListener('dragover', (event) => {
-  event.preventDefault();
-  dragDropContainer.classList.add('drag-over');
+    event.preventDefault();
+    dragDropContainer.classList.add('drag-over');
 });
 
 dragDropContainer.addEventListener('dragleave', () => {
-  dragDropContainer.classList.remove('drag-over');
+    dragDropContainer.classList.remove('drag-over');
 });
 
 dragDropContainer.addEventListener('drop', (event) => {
-  event.preventDefault();
-  dragDropContainer.classList.remove('drag-over');
+    event.preventDefault();
+    dragDropContainer.classList.remove('drag-over');
 
-  // Get the first file from the dropped files
-  const file = event.dataTransfer.files[0];
+    // Get the first file from the dropped files
+    const file = event.dataTransfer.files[0];
 
-  // Check if the file is a PNG, JPEG, or GIF
-  if (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif') {
-    selectedFile = file;
-    updateFileInfo(file.name);
-    enableUploadButton();
-  } else {
-    alert('Please drop a PNG, JPEG, or GIF file.');
-  }
+    // Check if the file is a PNG, JPEG, or GIF
+    if (file && (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif')) {
+        selectedFile = file;
+        updateFileInfo(file.name);
+        enableUploadButton();
+    } else {
+        alert('Please drop a PNG, JPEG, or GIF file.');
+    }
 });
 
 dragDropContainer.addEventListener('click', () => {
-  fileInput.click();
+    fileInput.click();
 });
 
 fileInput.addEventListener('change', () => {
-  const file = fileInput.files[0];
-  if (file && (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif')) {
-    selectedFile = file;
-    updateFileInfo(file.name);
-    enableUploadButton();
-  } else {
-    updateFileInfo('');
-    disableUploadButton();
-  }
+    const file = fileInput.files[0];
+    if (file && (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif')) {
+        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);
+    if (selectedFile) {
+        const formData = new FormData();
+        formData.append('file', selectedFile);
 
-    // Open the uploaded image in a new tab
-    const imageUrl = URL.createObjectURL(selectedFile);
-    window.open(imageUrl, '_blank');
-  } else {
-    alert('Please select a file to upload.');
-  }
+        fetch('upload.php', {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                alert('File uploaded successfully!');
+                // Optionally handle the response, e.g., display uploaded file details
+                console.log('Uploaded filename:', data.fileName);
+            } else {
+                alert('File upload failed. Please try again.');
+            }
+        })
+        .catch(error => {
+            console.error('Error uploading file:', error);
+            alert('File upload failed. Please try again.');
+        });
+    } else {
+        alert('Please select a file to upload.');
+    }
 });
 
 function updateFileInfo(fileName) {
-  const fileInfo = document.getElementById('file-info');
-  fileInfo.textContent = fileName ? `Selected file: ${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';
+    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';
-}
\ No newline at end of file
+    uploadButton.disabled = true;
+    uploadButton.style.backgroundColor = '#ccc'; // Gray
+    uploadButton.style.cursor = 'default';
+}
diff --git a/frontend/upload.php b/frontend/upload.php
new file mode 100644
index 0000000..7ebaa45
--- /dev/null
+++ b/frontend/upload.php
@@ -0,0 +1,52 @@
+<?php
+// Database configuration
+$host = 'localhost'; // MySQL host
+$dbname = 'your_database_name'; // Database name
+$username = 'your_username'; // Database username
+$password = 'your_password'; // Database password
+
+// Create a PDO instance (connect to database)
+$pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
+$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+
+// Check if a file was uploaded
+if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
+    // Validate file type (ensure it's an image)
+    $fileType = $_FILES['file']['type'];
+    $allowedTypes = ['image/png', 'image/jpeg', 'image/gif'];
+
+    if (in_array($fileType, $allowedTypes)) {
+        // Define upload directory (adjust as needed)
+        $uploadDirectory = 'uploads/';
+
+        // Create uploads directory if it doesn't exist
+        if (!file_exists($uploadDirectory)) {
+            mkdir($uploadDirectory, 0777, true);
+        }
+
+        // Generate a unique filename
+        $fileName = uniqid('img_') . '_' . basename($_FILES['file']['name']);
+        $targetPath = $uploadDirectory . $fileName;
+
+        // Attempt to move uploaded file to specified directory
+        if (move_uploaded_file($_FILES['file']['tmp_name'], $targetPath)) {
+            // File uploaded successfully, insert into database
+            $sql = "INSERT INTO images (filename, filepath) VALUES (:filename, :filepath)";
+            $stmt = $pdo->prepare($sql);
+            $stmt->execute(['filename' => $fileName, 'filepath' => $targetPath]);
+
+            // Return success response
+            echo json_encode(['success' => true, 'fileName' => $fileName]);
+        } else {
+            // Error moving file
+            echo json_encode(['success' => false, 'message' => 'Error uploading file.']);
+        }
+    } else {
+        // Invalid file type
+        echo json_encode(['success' => false, 'message' => 'Invalid file type.']);
+    }
+} else {
+    // Error in file upload
+    echo json_encode(['success' => false, 'message' => 'Error in file upload.']);
+}
+?>