merged css files for php
This commit is contained in:
Toddeh Alexander - MacAir
parent
714087c15f
commit
a3c5e52703
4 changed files with 146 additions and 7 deletions
|
|
@ -1,3 +1,4 @@
|
|||
/* Common Styles */
|
||||
nav {
|
||||
background-color: #333;
|
||||
position: fixed;
|
||||
|
|
@ -45,7 +46,6 @@ nav {
|
|||
background-color: #555;
|
||||
}
|
||||
|
||||
/* Upload Page Styles */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
|
|
@ -57,6 +57,46 @@ body {
|
|||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Home Page Styles */
|
||||
#drag-drop-container {
|
||||
border: 2px dashed #ccc;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
width: 400px;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
#drag-drop-container:hover {
|
||||
border-color: #4CAF50;
|
||||
background-color: #f1f1f1;
|
||||
transform: scale(1.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#drag-drop-container.drag-over {
|
||||
border-color: #4CAF50;
|
||||
background-color: #f1f1f1;
|
||||
transform: scale(1.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#upload-button {
|
||||
background-color: #ccc;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#upload-button:enabled {
|
||||
background-color: #4CAF50;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Upload Page Styles */
|
||||
#upload-container {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
|
|
@ -89,11 +129,6 @@ body {
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
.upload-button:enabled {
|
||||
background-color: #4CAF50;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload-button:disabled {
|
||||
background-color: #ccc;
|
||||
cursor: default;
|
||||
|
|
|
|||
|
|
@ -47,6 +47,16 @@ if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES['image']['tmp_name'])
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<div id="drag-drop-container">
|
||||
<h2>Drag and Drop Images</h2>
|
||||
<p>PNG | JPEG | GIF files only <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, image/gif" hidden>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<button id="upload-button" type="button" disabled> Upload</button>
|
||||
|
||||
<nav>
|
||||
<div class="nav-container">
|
||||
<a href="index.php" class="nav-logo">Image Upload</a>
|
||||
|
|
|
|||
94
backend/php/js/script.js
Normal file
94
backend/php/js/script.js
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
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';
|
||||
}
|
||||
0
backend/php/js/user_gallery.js
Normal file
0
backend/php/js/user_gallery.js
Normal file
Loading…
Reference in a new issue