FSST/Geizkragen
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

Add profile picture upload functionality to account page

Browse Source
This commit is contained in:
Fabian Schieder 2026-01-25 22:12:55 +01:00
parent 751a7999c0
commit e219d13497
3 changed files with 182 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
account.php
View File

@ -62,9 +62,9 @@ if (!$user)
include 'header.php';
?>
<link rel="stylesheet" href="assets/css/login.css">
<link rel="stylesheet" href="assets/css/login.css">
<main class="auth" role="main">
<main class="auth" role="main">
<section class="auth__grid auth__card__side" aria-label="Account Bereich">
<div class="auth__card auth__card__side__picture">
<header class="auth__header">
@ -76,13 +76,32 @@ include 'header.php';
<div class="auth__card">
<header class="auth__header">
<p class="auth__title">
Username: <?php echo htmlspecialchars($user['displayName'], ENT_QUOTES, 'UTF-8'); ?></p> <br>
<p class="auth__title">UserID: <?php echo (int)$user['userID']; ?></p> <br>
<p class="auth__title">Email: <?php echo htmlspecialchars($user['email']); ?></p> <br>
<p class="auth__title">Username: <?php echo htmlspecialchars($user['displayName'], ENT_QUOTES, 'UTF-8'); ?></p>
<p class="auth__title">UserID: <?php echo (int)$user['userID']; ?></p>
<p class="auth__title">Email: <?php echo htmlspecialchars($user['email']); ?></p>
</header>
<?php if (isset($_GET['upload']) && $_GET['upload'] === 'ok'): ?>
<p class="auth__alert__sucess" role="status">Upload erfolgreich.</p>
<?php endif; ?>
<?php if (isset($_GET['upload']) && $_GET['upload'] === 'err'): ?>
<p class="auth__alert__error" role="alert">Upload fehlgeschlagen. Bitte eine gültige Bilddatei auswählen.</p>
<?php endif; ?>
<form class="auth__form" action="upload.php" method="post" enctype="multipart/form-data">
<div class="auth__field">
<label for="file">Profilbild auswählen</label>
<input type="file" name="uploadFile" id="file" accept="image/*" required>
<p class="auth__hint">Erlaubt: JPG/PNG/WebP. Maximalgröße je nach Server.</p>
</div>
<div class="auth__actions">
<button class="auth__submit" type="submit">Hochladen</button>
</div>
</form>
</div>
</section>
</main>
</main>
<?php include 'footer.php'; ?>

30
assets/css/login.css
View File

@ -165,7 +165,8 @@
}
.auth__field input[type="text"],
.auth__field input[type="password"] {
.auth__field input[type="password"],
.auth__field input[type="file"] {
width: 100%;
box-sizing: border-box;
padding: 12px 12px;
@ -178,11 +179,36 @@
}
.auth__field input[type="text"]:focus,
.auth__field input[type="password"]:focus {
.auth__field input[type="password"]:focus,
.auth__field input[type="file"]:focus {
border-color: rgba(37, 99, 235, 0.75);
box-shadow: var(--gh-focus);
}
/* Leicht dezenter Hinweistext unter Feldern (z.B. Upload) */
.auth__hint {
margin: 8px 0 0;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.75);
line-height: 1.35;
}
/* Optional: File-Button im Input anfarblich etwas angleichen (Browser support variiert) */
.auth__field input[type="file"]::file-selector-button {
margin-right: 10px;
padding: 10px 12px;
border: 0;
border-radius: 10px;
background: rgba(39, 74, 151, 0.35);
color: #ffffff;
font-weight: 700;
cursor: pointer;
}
.auth__field input[type="file"]::file-selector-button:hover {
background: rgba(39, 74, 151, 0.5);
}
.auth__actions {
margin-top: 14px;
}

117
upload.php Normal file
View File

@ -0,0 +1,117 @@
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
session_start();
if (empty($_SESSION['user_id']))
{
header('Location: login.php');
exit();
}
$userId = (int)$_SESSION['user_id'];
if ($_SERVER['REQUEST_METHOD'] !== 'POST')
{
header('Location: account.php');
exit();
}
if (!isset($_FILES['uploadFile']) || !is_array($_FILES['uploadFile']))
{
header('Location: account.php?upload=err');
exit();
}
$file = $_FILES['uploadFile'];
$fileError = isset($file['error']) ? (int)$file['error'] : UPLOAD_ERR_NO_FILE;
if ($fileError !== UPLOAD_ERR_OK)
{
header('Location: account.php?upload=err');
exit();
}
// Basic Validierung
$tmp = isset($file['tmp_name']) ? (string)$file['tmp_name'] : '';
if ($tmp === '' || !is_uploaded_file($tmp))
{
header('Location: account.php?upload=err');
exit();
}
$allowedMimeToExt = [
'image/jpeg' => 'jpg',
'image/png' => 'png',
'image/webp' => 'webp'
];
$finfo = new finfo(FILEINFO_MIME_TYPE);
$mime = $finfo->file($tmp);
if (!$mime || !isset($allowedMimeToExt[$mime]))
{
header('Location: account.php?upload=err');
exit();
}
$ext = $allowedMimeToExt[$mime];
$targetDir = __DIR__ . DIRECTORY_SEPARATOR . 'assets' . DIRECTORY_SEPARATOR . 'images' . DIRECTORY_SEPARATOR . 'profilePictures';
if (!is_dir($targetDir))
{
@mkdir($targetDir, 0755, true);
}
// Fallback-kompatibler Name (auch ohne random_bytes)
$rand = uniqid('', true);
$rand = str_replace('.', '', $rand);
$filename = 'user_' . $userId . '_' . $rand . '.' . $ext;
$targetPath = $targetDir . DIRECTORY_SEPARATOR . $filename;
if (!move_uploaded_file($tmp, $targetPath))
{
header('Location: account.php?upload=err');
exit();
}
// Pfad, der in HTML genutzt wird (relativ zur Webroot)
$publicPath = 'assets/images/profilePictures/' . $filename;
$servername = "localhost";
$port = 3306;
$username = "FSST";
$password = "L9wUNZZ9Qkbt";
$db = "FSST";
$conn = mysqli_connect($servername, $username, $password, $db, $port);
if (!$conn)
{
header('Location: account.php?upload=err');
exit();
}
$stmt = mysqli_prepare($conn, "UPDATE users SET profilePicture = ? WHERE userID = ?");
if (!$stmt)
{
mysqli_close($conn);
header('Location: account.php?upload=err');
exit();
}
mysqli_stmt_bind_param($stmt, 'si', $publicPath, $userId);
$ok = mysqli_stmt_execute($stmt);
mysqli_stmt_close($stmt);
mysqli_close($conn);
if (!$ok)
{
header('Location: account.php?upload=err');
exit();
}
header('Location: account.php?upload=ok');
exit();