beenull/Imgur-Clone
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

green upload button on valid upload

Browse source
This commit is contained in:
Toddeh Alexander - MacAir 2024-04-30 14:22:43 -07:00
parent a3c5e52703
commit 13705c1886
2 changed files with 15 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
backend/php/css/styles.css
View file

@ -1,3 +1,4 @@
/* Common Styles */
nav {
background-color: #333;
@ -81,43 +82,6 @@ body {
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;
width: 400px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;
}
#upload-container h2 {
margin-bottom: 20px;
}
.file-label {
font-size: 16px;
}
.file-input {
margin-top: 10px;
}
.upload-button {
margin-top: 20px;
background-color: #ccc;
@ -129,7 +93,15 @@ body {
cursor: default;
}
.upload-button:disabled {
background-color: #ccc;
cursor: default;
.upload-button.enabled {
background-color: #4CAF50;
cursor: pointer;
}
.file-label {
font-size: 16px;
}
.file-input {
margin-top: 10px;
}

16
backend/php/index.php
View file

@ -1,5 +1,4 @@
<?php
$servername = "172.20.0.5";
$username = "root";
$password = "root";
@ -28,7 +27,6 @@ if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES['image']['tmp_name'])
$sql = "INSERT INTO image_database.image_table (image_name, image_file) VALUES ('$image_name', '$imgContent')";
if ($mysqli->query($sql) === TRUE) {
// Redirect the user to the gallery.php page
header("Location: gallery.php");
exit();
} else {
@ -46,17 +44,6 @@ if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES['image']['tmp_name'])
<title>Upload Image</title>
</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>
@ -76,5 +63,8 @@ if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES['image']['tmp_name'])
</form>
</div>
<script>
document.getElementById('image').addEventListener('change',function(){this.files.length>0&&this.files[0].type.startsWith('image/')?document.querySelector('.upload-button').classList.add('enabled'):document.querySelector('.upload-button').classList.remove('enabled')});
</script>
</body>
</html>