58 lines
2.4 KiB
HTML
Executable File
58 lines
2.4 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Image Picker Test</title>
|
|
</head>
|
|
<body>
|
|
<h1>Image Picker Debugging Instructions</h1>
|
|
|
|
<h2>Test Steps:</h2>
|
|
<ol>
|
|
<li>Go to: <a href="https://skyarts.ddns.net/admin/homepage" target="_blank">Homepage Editor</a></li>
|
|
<li>Click on any existing section's "Edit" button</li>
|
|
<li>Scroll down to "Section Image"</li>
|
|
<li>Click "Select/Upload Image" button</li>
|
|
<li>Open Browser Developer Console (F12)</li>
|
|
<li>Watch for console logs that will show:
|
|
<ul>
|
|
<li>"Opening image picker. Mode: single Callback: function"</li>
|
|
<li>"Modal opened successfully"</li>
|
|
<li>When you click an image: "Toggle selection for: [URL] Mode: single"</li>
|
|
<li>When you click "Select Images": "Confirm selection clicked. Selected images: [array]"</li>
|
|
<li>After callback: "Image selection successful!"</li>
|
|
</ul>
|
|
</li>
|
|
</ol>
|
|
|
|
<h2>What Was Fixed:</h2>
|
|
<ul>
|
|
<li>✅ Fixed ID attribute on hidden ImageUrl field</li>
|
|
<li>✅ Fixed case mismatch in SelectedImageUrl field</li>
|
|
<li>✅ Changed onclick inline handlers to event listeners (prevents URL escaping issues)</li>
|
|
<li>✅ Added comprehensive console logging for debugging</li>
|
|
<li>✅ Added error handling with try-catch blocks</li>
|
|
<li>✅ Added validation checks for all DOM elements</li>
|
|
<li>✅ Added user-friendly error alerts</li>
|
|
</ul>
|
|
|
|
<h2>Expected Behavior:</h2>
|
|
<p>When you select an image and click "Select Images (1)":</p>
|
|
<ul>
|
|
<li>The modal should close</li>
|
|
<li>The image preview should appear below the button</li>
|
|
<li>The SelectedImageUrl hidden field should contain the image URL</li>
|
|
<li>When you submit the form, the image should be saved to the section</li>
|
|
</ul>
|
|
|
|
<h2>If Issues Persist:</h2>
|
|
<p>Check the browser console for error messages. Common issues:</p>
|
|
<ul>
|
|
<li>Red error about "callback function not found" - refresh the page</li>
|
|
<li>No images loading - check /admin/upload/list endpoint</li>
|
|
<li>Modal not opening - Bootstrap JS not loaded properly</li>
|
|
</ul>
|
|
</body>
|
|
</html>
|