green upload button on valid upload
This commit is contained in:
parent
a3c5e52703
commit
13705c1886
|
@ -1,3 +1,4 @@
|
||||||
|
|
||||||
/* Common Styles */
|
/* Common Styles */
|
||||||
nav {
|
nav {
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
|
@ -81,43 +82,6 @@ body {
|
||||||
cursor: pointer;
|
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 {
|
.upload-button {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
background-color: #ccc;
|
background-color: #ccc;
|
||||||
|
@ -129,7 +93,15 @@ body {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-button:disabled {
|
.upload-button.enabled {
|
||||||
background-color: #ccc;
|
background-color: #4CAF50;
|
||||||
cursor: default;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.file-label {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-input {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
|
@ -1,5 +1,4 @@
|
||||||
<?php
|
<?php
|
||||||
|
|
||||||
$servername = "172.20.0.5";
|
$servername = "172.20.0.5";
|
||||||
$username = "root";
|
$username = "root";
|
||||||
$password = "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')";
|
$sql = "INSERT INTO image_database.image_table (image_name, image_file) VALUES ('$image_name', '$imgContent')";
|
||||||
|
|
||||||
if ($mysqli->query($sql) === TRUE) {
|
if ($mysqli->query($sql) === TRUE) {
|
||||||
// Redirect the user to the gallery.php page
|
|
||||||
header("Location: gallery.php");
|
header("Location: gallery.php");
|
||||||
exit();
|
exit();
|
||||||
} else {
|
} else {
|
||||||
|
@ -46,17 +44,6 @@ if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES['image']['tmp_name'])
|
||||||
<title>Upload Image</title>
|
<title>Upload Image</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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>
|
<nav>
|
||||||
<div class="nav-container">
|
<div class="nav-container">
|
||||||
<a href="index.php" class="nav-logo">Image Upload</a>
|
<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>
|
</form>
|
||||||
</div>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
Loading…
Reference in a new issue