souko/Simple-Wishlist
1
0
Fork 0
Code Issues Releases 2 Activity

Support Image-Upload and Paste-from-Clipboard

Browse Source
This commit is contained in:
Marcel Peterkau
2025-09-15 09:48:26 +02:00
parent 216110992f
commit 8daa183885
5 changed files with 846 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
index.php
View File

@@ -369,9 +369,9 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<hr class="mb-3 opacity-25">
<p class="mb-1">
Made with
<img src="img/heart-icon.png" alt="Shakaru" class="icon-sm mx-1">
<img src="img/heart-icon.png" alt="Shakaru" class="icon-sm mx-1">
and
<img src="img/paw-icon.png" alt="Paw" class="icon-sm mx-1">
<img src="img/paw-icon.png" alt="Paw" class="icon-sm mx-1">
by
<strong>
<img src="img/shakaru-icon.png" alt="Shakaru" class="icon-sm mx-1">
@@ -418,7 +418,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<h5 class="modal-title" id="itemModalTitle">Wunsch hinzufügen</h5><button type="button" class="btn-close"
data-bs-dismiss="modal"></button>
</div>
<form action="item.php" method="POST" id="itemForm">
<form action="item.php" method="POST" id="itemForm" enctype="multipart/form-data">
<div class="modal-body">
<label class="form-label">Titel</label>
<input class="form-control" name="ItemTitle" id="ItemTitle" required>
@@ -438,13 +438,73 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<label class="form-label mt-2">Link zum Angebot</label>
<input class="form-control" name="ItemLink" id="ItemLink" type="url" pattern="https?://.+">
<label class="form-label mt-2">Bild (URL)</label>
<input class="form-control" name="ItemImage" id="ItemImage" type="url" pattern="https?://.+">
<hr class="my-3">
<div class="form-check mt-2" id="RemoveImageWrap" style="display:none;">
<label class="form-label">Bild hinzufügen</label>
<ul class="nav nav-tabs" id="imgTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="tab-url" data-bs-toggle="tab" data-bs-target="#pane-url"
type="button" role="tab">Bild-URL</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab-file" data-bs-toggle="tab" data-bs-target="#pane-file" type="button"
role="tab">Datei-Upload</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab-paste" data-bs-toggle="tab" data-bs-target="#pane-paste" type="button"
role="tab">Aus Zwischenablage</button>
</li>
</ul>
<div class="tab-content border border-top-0 rounded-bottom p-3" id="imgTabContent">
<!-- URL -->
<div class="tab-pane fade show active" id="pane-url" role="tabpanel" aria-labelledby="tab-url">
<div class="mb-2">
<input class="form-control" name="ItemImageUrl" id="ItemImageUrl" type="url"
placeholder="https://…/bild.jpg" pattern="https?://.+">
<div class="form-text">Falls der Download scheitert, bitte Datei hochladen oder per Zwischenablage
einfügen.</div>
</div>
</div>
<!-- FILE -->
<div class="tab-pane fade" id="pane-file" role="tabpanel" aria-labelledby="tab-file">
<div class="mb-2">
<input class="form-control" name="ItemImageFile" id="ItemImageFile" type="file" accept="image/*">
<div class="form-text">Max. 8 MB. Unterstützt gängige Formate (jpg, png, webp, avif…).</div>
</div>
</div>
<!-- PASTE -->
<div class="tab-pane fade" id="pane-paste" role="tabpanel" aria-labelledby="tab-paste">
<div class="mb-2 d-flex align-items-center gap-2">
<button type="button" class="btn btn-outline-secondary btn-sm" id="PasteActivator">
Aus Zwischenablage einfügen (Strg/Cmd+V)
</button>
<small class="text-muted">Tipp: Rechtsklick → „Bild kopieren“, dann hier klicken und einfügen.</small>
</div>
<!-- Unsichtbarer Paste-Catcher -->
<div id="PasteZone" class="visually-hidden" contenteditable="true"></div>
<!-- Hidden: Base64 + Name -->
<input type="hidden" name="ItemImagePaste" id="ItemImagePaste">
<input type="hidden" name="ItemImagePasteName" id="ItemImagePasteName" value="clipboard.png">
</div>
</div>
<!-- Live Preview (für File/Paste/URL wenn möglich) -->
<div class="mt-3" id="ImgPreviewWrap" style="display:none;">
<label class="form-label">Vorschau</label>
<img id="ImgPreview" src="" alt="Bildvorschau" class="img-fluid border rounded w-100"
style="max-height:220px; object-fit:contain;">
</div>
<div class="form-check mt-3" id="RemoveImageWrap" style="display:none;">
<input class="form-check-input" type="checkbox" value="1" id="RemoveImage" name="RemoveImage">
<label class="form-check-label" for="RemoveImage">Aktuelles Bild entfernen</label>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="action" id="ItemAction" value="add">