Spaces:
Sleeping
Sleeping
File size: 6,395 Bytes
6c54eb3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 | {% extends "base.html" %}
{% block content %}
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card">
<div class="card-header text-center">
<h1 class="card-title text-gradient">
<i class="bi bi-cloud-upload"></i>
Upload PDF Document
</h1>
<p class="card-subtitle">Upload your PDF to generate intelligent questions</p>
</div>
<div class="card-body">
<!-- Settings Link -->
<div class="text-center mb-4">
<a href="{{ url_for('configure_chunking') }}" class="btn btn-outline">
<i class="bi bi-gear"></i>
Configure Processing Settings
</a>
</div>
<!-- Upload Form -->
<form method="POST" enctype="multipart/form-data" id="uploadForm">
<div class="drop-zone" id="dropZone">
<input type="file" name="pdf" id="pdfInput" class="d-none" accept=".pdf" required>
<div class="drop-zone-icon">
<i class="bi bi-file-earmark-pdf"></i>
</div>
<h4 class="mb-3">Drag & Drop Your PDF Here</h4>
<p class="text-muted mb-4">or click to browse files</p>
<button type="button" class="btn btn-primary" id="browseBtn">
<i class="bi bi-folder2-open"></i>
Choose File
</button>
<div id="fileInfo" class="mt-4"></div>
</div>
<!-- Progress Bar -->
<div class="progress mt-4 d-none" id="uploadProgress">
<div class="progress-bar" role="progressbar" style="width: 0%"></div>
</div>
<!-- Upload Button (hidden once auto-submit is enabled) -->
<div class="d-grid mt-4">
<button type="submit" class="btn btn-success btn-lg" id="uploadBtn" disabled>
<i class="bi bi-upload"></i>
Process PDF
</button>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
const dropZone = document.getElementById('dropZone');
const fileInput = document.getElementById('pdfInput');
const browseBtn = document.getElementById('browseBtn');
const uploadBtn = document.getElementById('uploadBtn');
const fileInfo = document.getElementById('fileInfo');
const uploadProgress = document.getElementById('uploadProgress');
const progressBar = uploadProgress.querySelector('.progress-bar');
const form = document.getElementById('uploadForm');
let isSubmitting = false;
// Click to browse (only via button, not the entire drop-zone)
browseBtn.addEventListener('click', (e) => {
e.preventDefault();
if (isSubmitting) return;
fileInput.click();
});
// File input change
fileInput.addEventListener('change', (e) => handleFile(e.target.files[0]));
// Drag and drop
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.classList.add('dragover');
});
dropZone.addEventListener('dragleave', () => {
dropZone.classList.remove('dragover');
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
if (isSubmitting) return;
dropZone.classList.remove('dragover');
const file = e.dataTransfer.files && e.dataTransfer.files[0];
if (file) handleFile(file);
});
function autoSubmit() {
if (isSubmitting) return;
isSubmitting = true;
// Trigger form submit programmatically and disable controls
uploadBtn.innerHTML = '<span class="loading"></span> Processing...';
uploadBtn.disabled = true;
browseBtn.disabled = true;
uploadProgress.classList.remove('d-none');
// Simulate progress
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 15;
if (progress > 90) progress = 90;
progressBar.style.width = progress + '%';
}, 200);
// Submit
form.submit();
// Clear interval after a short delay to avoid lingering timer
setTimeout(() => {
clearInterval(interval);
progressBar.style.width = '100%';
}, 2000);
}
function handleFile(file) {
if (file && file.type === 'application/pdf') {
const fileSize = (file.size / 1024 / 1024).toFixed(2);
fileInfo.innerHTML = `
<div class="alert alert-success">
<i class="bi bi-check-circle"></i>
<strong>${file.name}</strong> (${fileSize} MB)
<br>
<small>Uploading...</small>
</div>
`;
uploadBtn.disabled = true;
// Auto-submit immediately after a valid file is selected/dropped
// Use microtask to allow DOM to update before submit
setTimeout(autoSubmit, 0);
} else {
fileInfo.innerHTML = `
<div class="alert alert-danger">
<i class="bi bi-exclamation-triangle"></i>
Please select a valid PDF file
</div>
`;
uploadBtn.disabled = true;
}
}
// Prevent manual double submit
form.addEventListener('submit', function(e) {
if (isSubmitting) return; // allow the first programmatic submit
isSubmitting = true;
uploadBtn.disabled = true;
browseBtn.disabled = true;
}, { once: true });
});
</script>
{% endblock %} |