genealogy-app/templates/upload_pdf.html

{% extends "layout.html" %}

{% block title %}上传家谱 - 家谱管理系统{% endblock %}

{% block extra_css %}
<style>
    .drop-shadow { filter: drop-shadow(0 0 4px rgba(0,0,0,0.5)); }
</style>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="bi bi-cloud-upload me-2"></i>上传家谱PDF文件</h5>
            </div>
            <div class="card-body p-4">
                <form method="POST" enctype="multipart/form-data" id="uploadForm">
                    <div class="mb-4">
                        <label class="form-label fw-bold">选择PDF文件</label>
                        <input type="file" name="file" id="fileInput" class="form-control form-control-lg" accept=".pdf" required>
                        <div class="form-text mt-2">
                            只支持PDF格式的家谱文件。上传后将显示在家谱管理列表中。
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label class="form-label fw-bold">版本名称 <span class="text-danger">*</span></label>
                            <input type="text" name="version_name" class="form-control" placeholder="如：衢州1926版" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">版本来源 <span class="text-danger">*</span></label>
                            <input type="text" name="version_source" class="form-control" placeholder="如：留越收藏" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">文件提供人</label>
                            <input type="text" name="file_provider" class="form-control" placeholder="默认：当前系统登录账号">
                        </div>
                    </div>

                    <div class="alert alert-warning mb-4">
                        <i class="bi bi-info-circle me-2"></i>
                        提示：文件将上传至云端 OSS 存储，处理过程可能需要几秒钟。
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{{ url_for('pdf_management') }}" class="btn btn-light px-4">取消</a>
                        <button type="submit" class="btn btn-primary px-5" id="submitBtn">
                            <i class="bi bi-check-lg me-1"></i> 开始上传
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.getElementById('uploadForm').addEventListener('submit', function(e) {
        // Prevent multiple submissions
        const btn = document.getElementById('submitBtn');
        if (btn.classList.contains('disabled')) {
            e.preventDefault();
            return;
        }
        
        // Show loading state without blocking submit
        btn.classList.add('disabled');
        btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 上传处理中...';
        
        // Disable after a tiny delay to ensure form submission proceeds
        setTimeout(() => {
            btn.disabled = true;
        }, 10);
    });

    document.getElementById('fileInput').addEventListener('change', function(e) {
        let files = e.target.files;
        
        if (files.length > 1) {
            alert('一次只能上传1个PDF文件。');
            e.target.value = ''; // clear selection
            return;
        }
        
        if (files.length > 0) {
            const file = files[0];
            if (!file.name.toLowerCase().endsWith('.pdf')) {
                alert('只支持PDF文件上传。');
                e.target.value = ''; // clear selection
                return;
            }
        }
    });
</script>
{% endblock %}