michaelschiemer/src/Application/Admin/templates/upload-test.view.php

<layout name="layouts/admin" />

<div class="section">
    <h2>{{ title }}</h2>
    <p>{{ description }}</p>

    <div class="stat-card">
        <h3>JavaScript Upload Test</h3>

        <div class="upload-test-form">
            <div class="form-group">
                <label for="test-upload">Select Image Files:</label>
                <input type="file" id="test-upload" accept="image/*" multiple>
            </div>

            <button type="button" id="upload-button" class="upload-button">
                Upload Files
            </button>

            <div class="progress-container">
                <div class="progress-bar-wrapper">
                    <div id="progress-bar" class="progress-bar"></div>
                </div>
                <div id="progress-text" class="progress-text"></div>
            </div>
        </div>
    </div>

    <div class="stat-card">
        <h3>Upload Results</h3>
        <div id="results" class="results-container">
            <p class="help-text">Upload results will appear here...</p>
        </div>
    </div>

    <div class="stat-card">
        <h3>Test Console Commands</h3>
        <p>Open browser console and try:</p>
        <pre><code>// Test CSRF token generation
await testCsrfTokens();

// Test file validation
FileValidator.validateImage(file);

// Access upload manager directly
uploadManager.getCsrfTokens('/api/images', 'post');</code></pre>
    </div>
</div>

<style>
    .upload-test-form {
        margin-bottom: 20px;
    }

    .form-group {
        margin-bottom: 16px;
    }

    .form-group label {
        display: block;
        font-weight: 500;
        color: var(--gray-700);
        margin-bottom: 4px;
    }

    .form-group input[type="file"] {
        padding: 12px;
        border: 2px dashed var(--gray-300);
        border-radius: 8px;
        background: var(--gray-50);
        width: 100%;
        cursor: pointer;
        transition: border-color 0.2s;
    }

    .form-group input[type="file"]:hover {
        border-color: var(--primary);
        background: rgba(30, 64, 175, 0.05);
    }

    .upload-button {
        background: var(--primary);
        color: white;
        padding: 12px 24px;
        border: none;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.2s;
    }

    .upload-button:hover:not(:disabled) {
        background: #1d4ed8;
    }

    .upload-button:disabled {
        background: var(--gray-400);
        cursor: not-allowed;
    }

    .progress-container {
        margin-top: 16px;
        display: none;
    }

    .progress-bar-wrapper {
        width: 100%;
        height: 8px;
        background: var(--gray-200);
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 8px;
    }

    .progress-bar {
        height: 100%;
        background: var(--primary);
        width: 0%;
        transition: width 0.3s ease;
    }

    .progress-text {
        font-size: 14px;
        color: var(--gray-600);
    }

    .results-container {
        max-height: 400px;
        overflow-y: auto;
    }

    .help-text {
        color: var(--gray-500);
        font-style: italic;
    }

    .message {
        padding: 8px 12px;
        border-radius: 4px;
        margin-bottom: 8px;
        font-size: 14px;
    }

    .message-info {
        background: rgba(59, 130, 246, 0.1);
        border: 1px solid rgba(59, 130, 246, 0.3);
        color: #1e40af;
    }

    .message-success {
        background: rgba(34, 197, 94, 0.1);
        border: 1px solid rgba(34, 197, 94, 0.3);
        color: #15803d;
    }

    .message-error {
        background: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: #dc2626;
    }

    .upload-result {
        border: 1px solid var(--gray-200);
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 12px;
        background: var(--gray-50);
    }

    .upload-result h4 {
        margin: 0 0 8px 0;
        font-size: 16px;
    }

    .result-details p {
        margin: 4px 0;
        font-size: 14px;
    }

    .result-details img {
        border-radius: 4px;
        border: 1px solid var(--gray-200);
    }

    .error {
        color: var(--danger);
    }

    pre {
        background: var(--gray-100);
        padding: 12px;
        border-radius: 4px;
        overflow-x: auto;
        font-size: 13px;
    }
</style>

<script type="module">
    // Show progress container when upload starts
    document.addEventListener('DOMContentLoaded', () => {
        const uploadButton = document.getElementById('upload-button');
        const progressContainer = document.querySelector('.progress-container');

        if (uploadButton && progressContainer) {
            uploadButton.addEventListener('click', () => {
                progressContainer.style.display = 'block';
            });
        }
    });
</script>

<script type="module" src="/js/test-upload.js"></script>