From 4380b253dca2ab46d683746e593df86f3820f59f Mon Sep 17 00:00:00 2001 From: Toddeh Date: Tue, 30 Apr 2024 19:34:59 -0700 Subject: [PATCH] added drag and drop area for upload image, needs sanitization --- backend/php/css/styles.css | 13 ++++- backend/php/index.php | 96 ++++++++++++++++++++++++++-------- backend/php/js/script.js | 94 --------------------------------- backend/php/js/user_gallery.js | 0 4 files changed, 86 insertions(+), 117 deletions(-) delete mode 100644 backend/php/js/script.js delete mode 100644 backend/php/js/user_gallery.js diff --git a/backend/php/css/styles.css b/backend/php/css/styles.css index 10fb7e5..9a5ca21 100644 --- a/backend/php/css/styles.css +++ b/backend/php/css/styles.css @@ -1,4 +1,3 @@ - /* Common Styles */ nav { background-color: #333; @@ -103,5 +102,15 @@ body { } .file-input { - margin-top: 10px; + margin: 1rem 0; +} + +.file-info { + display: center; + flex-direction: column; + align-items: flex-start; +} + +#no-file-chosen { + margin-top: 5px; } \ No newline at end of file diff --git a/backend/php/index.php b/backend/php/index.php index c8b35ff..13c8a4b 100755 --- a/backend/php/index.php +++ b/backend/php/index.php @@ -40,31 +40,85 @@ if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES['image']['tmp_name']) - Upload Image + - - -
-

Upload Image

-
" method="post" enctype="multipart/form-data"> - - - -
+ - +
+

Upload Image

+

Accepted file types: jpg, jpeg, png, gif

+
+
+ +
+
" method="post" enctype="multipart/form-data"> + +
+
+ + + + \ No newline at end of file diff --git a/backend/php/js/script.js b/backend/php/js/script.js deleted file mode 100644 index d3464ad..0000000 --- a/backend/php/js/script.js +++ /dev/null @@ -1,94 +0,0 @@ -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, 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.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(); - } -}); - -uploadButton.addEventListener('click', () => { - if (selectedFile) { - const formData = new FormData(); - formData.append('file', selectedFile); - - 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}` : ''; -} - -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'; -} diff --git a/backend/php/js/user_gallery.js b/backend/php/js/user_gallery.js deleted file mode 100644 index e69de29..0000000