diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 00000000..257c2be9
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,108 @@
+# Changelog
+
+All notable changes to DocuElevate will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.3.3] - 2026-02-08
+
+### Added
+- **Drag-and-drop file upload on Files page**: You can now drag and drop files anywhere on the Files view (`/files`) to upload them, making it more convenient to add documents without navigating to the dedicated Upload page
+- Visual drop overlay that appears when dragging files over the Files page
+- Upload progress modal in bottom-right corner showing real-time upload status
+- Reusable `upload.js` module extracted from upload page for better code maintainability
+- Tests for drag-and-drop functionality presence in Files view
+- Enhanced visual feedback with animations and improved styling
+
+### Changed
+- Refactored upload functionality into a shared JavaScript module (`/static/js/upload.js`)
+- Updated Upload page to use the new shared upload module
+- Improved drop zone visual styling with better colors and animations
+
+### Fixed
+- N/A
+
+### Security
+- Continued security improvements from v0.3.2 (authlib, starlette updates)
+
+## [0.3.2] - 2026-02-06
+
+### Added
+- Comprehensive test infrastructure with pytest
+- Security scanning with CodeQL and Bandit
+- SECURITY_AUDIT.md documentation
+- API integration tests
+- Configuration validation tests
+- Enhanced CI/CD workflows
+- Pre-commit hooks configuration
+
+### Changed
+- Updated README with improved documentation structure
+- Enhanced .gitignore for better security
+
+### Fixed
+- Critical security vulnerabilities in authlib (upgraded to 1.6.5+)
+- Critical DoS vulnerability in starlette (upgraded to 0.49.1+)
+
+### Security
+- Improved SESSION_SECRET validation and handling
+- Enhanced security practices documentation
+
+## [0.3.1] - 2026-01-15
+
+### Added
+- Files view with sorting and filtering capabilities
+- Bulk operations (delete, reprocess) for multiple files
+- File detail view with processing history
+- Processing flow visualization
+
+### Changed
+- Improved UI responsiveness
+- Enhanced error handling and user feedback
+
+### Fixed
+- Various bug fixes in file processing pipeline
+
+## [0.3.0] - 2025-12-20
+
+### Added
+- OAuth2 authentication support with Authentik
+- Multi-provider storage support (Dropbox, Google Drive, OneDrive, S3, Nextcloud)
+- Azure Document Intelligence integration for OCR
+- OpenAI metadata extraction
+- Gotenberg PDF conversion service integration
+- IMAP integration for email attachment processing
+- REST API with FastAPI
+- Web UI for document management
+- Celery task queue for asynchronous processing
+
+### Changed
+- Major architectural improvements
+- Database schema optimizations
+
+## [0.2.0] - 2025-11-01
+
+### Added
+- Basic document upload functionality
+- Simple storage integration
+- Basic metadata extraction
+
+## [0.1.0] - 2025-10-01
+
+### Added
+- Initial release
+- Core document processing framework
+- Basic file handling
+
+---
+
+[Unreleased]: https://github.com/christianlouis/DocuElevate/compare/v0.3.3...HEAD
+[0.3.3]: https://github.com/christianlouis/DocuElevate/compare/v0.3.2...v0.3.3
+[0.3.2]: https://github.com/christianlouis/DocuElevate/compare/v0.3.1...v0.3.2
+[0.3.1]: https://github.com/christianlouis/DocuElevate/compare/v0.3.0...v0.3.1
+[0.3.0]: https://github.com/christianlouis/DocuElevate/compare/v0.2.0...v0.3.0
+[0.2.0]: https://github.com/christianlouis/DocuElevate/compare/v0.1.0...v0.2.0
+[0.1.0]: https://github.com/christianlouis/DocuElevate/releases/tag/v0.1.0
diff --git a/MILESTONES.md b/MILESTONES.md
index 7895beaf..d05e9cdc 100644
--- a/MILESTONES.md
+++ b/MILESTONES.md
@@ -34,13 +34,14 @@ DocuElevate follows [Semantic Versioning 2.0.0](https://semver.org/):
### v0.3.3 - Security & Testing Hardening (February 2026)
**Target Date:** February 15, 2026
**Status:** 🚧 In Progress
-**Theme:** Security, Quality, Testing
+**Theme:** Security, Quality, Testing, UX Improvements
#### Goals
- [x] Fix critical security vulnerabilities (authlib, starlette)
- [x] Implement comprehensive test suite
- [x] Add security scanning (CodeQL, Bandit)
- [x] Improve CI/CD pipeline
+- [x] Add drag-and-drop file upload to Files view
- [ ] Achieve 60% test coverage
- [ ] Add pre-commit hooks
- [ ] Update all dependencies to latest secure versions
@@ -50,6 +51,8 @@ DocuElevate follows [Semantic Versioning 2.0.0](https://semver.org/):
- [x] pytest configuration and fixtures
- [x] API integration tests
- [x] Configuration validation tests
+- [x] Drag-and-drop upload functionality in Files view
+- [x] Reusable upload.js module for code DRYness
- [ ] Task processing tests
- [ ] Storage provider integration tests
- [x] Updated CI/CD workflows
diff --git a/README.md b/README.md
index 5f0134e0..26711eae 100644
--- a/README.md
+++ b/README.md
@@ -79,20 +79,24 @@ Users can choose to send documents to any combination of these destinations thro
## Features
+- **Intuitive File Upload**:
+ - Drag-and-drop file upload on both Upload and Files pages—upload anywhere on the Files page
+ - Real-time upload progress with validation
+ - Support for PDF, Office documents, images, and more (up to 500MB per file)
- **Document Upload & Storage**:
- - Manual uploads (via API or UI) to Dropbox, Nextcloud, Google Drive, or Paperless.
+ - Manual uploads (via API or UI) to Dropbox, Nextcloud, Google Drive, or Paperless
- **OCR Processing (Azure)**:
- - Extract text from scanned PDFs using Azure Document Intelligence.
+ - Extract text from scanned PDFs using Azure Document Intelligence
- **Metadata Extraction (OpenAI)**:
- - Use GPT to classify, label, or otherwise enrich the text with structured metadata.
+ - Use GPT to classify, label, or otherwise enrich the text with structured metadata
- **PDF Conversion (Gotenberg)**:
- - Convert non-PDF attachments (e.g., Word docs, images) into PDFs.
+ - Convert non-PDF attachments (e.g., Word docs, images) into PDFs
- **Document Management (Paperless NGX)**:
- - Store processed documents and metadata in a Paperless NGX instance.
+ - Store processed documents and metadata in a Paperless NGX instance
- **IMAP Integration**:
- - Fetch documents from multiple mailboxes (including Gmail) and automatically enqueue them for processing.
+ - Fetch documents from multiple mailboxes (including Gmail) and automatically enqueue them for processing
- **Authentication**:
- - Secure access to the system using **Authentik** for OAuth2-based login.
+ - Secure access to the system using **Authentik** for OAuth2-based login
## Frameworks Used
diff --git a/TODO.md b/TODO.md
index 37427682..0fc4803d 100644
--- a/TODO.md
+++ b/TODO.md
@@ -111,7 +111,7 @@ This document tracks actionable tasks for the current development cycle. For lon
- [ ] Add dark mode
- [ ] Add loading spinners for async operations
- [ ] Improve error messages for users
-- [ ] Add drag-and-drop file upload
+- [x] Add drag-and-drop file upload (completed 2026-02-08)
- [ ] Add file type icons
- [ ] Implement toast notifications
- [ ] Add keyboard shortcuts
@@ -211,6 +211,11 @@ This document tracks actionable tasks for the current development cycle. For lon
## ✅ Completed (Recent)
+### 2026-02-08
+- [x] Added drag-and-drop file upload to Files view
+- [x] Extracted reusable upload.js module for code reuse
+- [x] Enhanced UX with visual drop overlay and upload progress modal
+
### 2026-02-06
- [x] Created comprehensive test infrastructure
- [x] Fixed critical security vulnerabilities
diff --git a/VERSION b/VERSION
index b6335a93..1c09c74e 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-0.1.0-test
+0.3.3
diff --git a/docs/UserGuide.md b/docs/UserGuide.md
index 90b60d80..d464d182 100644
--- a/docs/UserGuide.md
+++ b/docs/UserGuide.md
@@ -43,13 +43,35 @@ DocuElevate features a simple navigation system with the following main sections
## Uploading Documents
-### Web Upload
+DocuElevate provides multiple convenient ways to upload documents to the system.
+
+### Web Upload (Upload Page)
1. Navigate to the **Upload** page
-2. Drag and drop files onto the upload area, or click to browse your files
-3. Select files to upload (supported formats include PDF, Word documents, images, etc.)
-4. Click "Upload" to begin the process
-5. Your documents will be processed automatically according to the system configuration
+2. **Drag and drop** files onto the upload area, or **click** the upload area to browse your files
+3. Select files to upload (supported formats include PDF, Word documents, Excel spreadsheets, PowerPoint presentations, images, and more)
+4. The system will automatically validate and upload your files
+5. You'll see real-time progress for each file being uploaded
+6. Your documents will be processed automatically according to the system configuration
+
+#### Supported File Types
+- **Documents**: PDF, Word (.doc, .docx), Excel (.xls, .xlsx), PowerPoint (.ppt, .pptx)
+- **Images**: JPEG, PNG, GIF, BMP, TIFF, WebP, SVG
+- **Text**: Plain text (.txt), CSV, RTF, HTML, XML, Markdown
+- **Maximum file size**: 500MB per file
+
+### Drag-and-Drop on Files Page
+
+For even more convenience, you can upload files directly from the **Files** page:
+
+1. Navigate to the **Files** page where you view your processed documents
+2. **Drag files from your computer** and drop them **anywhere** on the page
+3. A visual overlay will appear to confirm you're in drag mode
+4. Release the files to begin uploading
+5. An upload progress modal will appear in the bottom-right corner
+6. The page will automatically refresh to show your newly uploaded files once complete
+
+This feature allows you to quickly add new files without navigating away from your document management view.
### Email Attachments
diff --git a/frontend/static/js/upload.js b/frontend/static/js/upload.js
new file mode 100644
index 00000000..48be819c
--- /dev/null
+++ b/frontend/static/js/upload.js
@@ -0,0 +1,264 @@
+// frontend/static/js/upload.js
+// Reusable drag-and-drop upload functionality for DocuElevate
+
+// Configuration
+const MAX_FILE_SIZE = 500 * 1024 * 1024; // 500MB
+
+// Allowed file types
+const ACCEPTED_TYPES = {
+ // PDF files
+ 'application/pdf': true,
+
+ // Image formats
+ 'image/jpeg': true, 'image/jpg': true, 'image/png': true,
+ 'image/gif': true, 'image/bmp': true, 'image/tiff': true,
+ 'image/webp': true, 'image/svg+xml': true,
+
+ // Office document formats - Word
+ 'application/msword': true,
+ 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': true,
+ 'application/vnd.openxmlformats-officedocument.wordprocessingml.template': true,
+ 'application/vnd.ms-word.document.macroEnabled.12': true,
+
+ // Excel
+ 'application/vnd.ms-excel': true,
+ 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': true,
+ 'application/vnd.openxmlformats-officedocument.spreadsheetml.template': true,
+ 'application/vnd.ms-excel.sheet.macroEnabled.12': true,
+
+ // PowerPoint
+ 'application/vnd.ms-powerpoint': true,
+ 'application/vnd.openxmlformats-officedocument.presentationml.presentation': true,
+ 'application/vnd.openxmlformats-officedocument.presentationml.template': true,
+ 'application/vnd.openxmlformats-officedocument.presentationml.slideshow': true,
+
+ // Other common formats
+ 'text/plain': true,
+ 'text/csv': true,
+ 'application/rtf': true,
+ 'text/rtf': true,
+ 'text/html': true,
+ 'application/xml': true,
+ 'text/xml': true
+};
+
+// File extensions that are always allowed (even if mime type is not recognized)
+const ACCEPTED_EXTENSIONS = [
+ '.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx',
+ '.odt', '.ods', '.odp', '.rtf', '.txt', '.csv',
+ '.jpg', '.jpeg', '.png', '.gif', '.bmp', '.tiff', '.webp', '.svg', '.md'
+];
+
+/**
+ * Process a list of files for upload
+ * @param {FileList} files - Files to process
+ * @param {HTMLElement} progressContainer - Container element for progress display
+ * @param {HTMLElement} statusMessage - Element for status message display
+ */
+function processFiles(files, progressContainer, statusMessage) {
+ if (files.length === 0) return;
+
+ if (statusMessage) {
+ statusMessage.textContent = `Processing ${files.length} file(s)...`;
+ }
+
+ // Clear previous upload progress
+ if (progressContainer) {
+ progressContainer.innerHTML = "";
+ }
+
+ // Process each file
+ for (let i = 0; i < files.length; i++) {
+ const file = files[i];
+ validateAndUpload(file, progressContainer, statusMessage);
+ }
+}
+
+/**
+ * Validate and upload a single file
+ * @param {File} file - File to validate and upload
+ * @param {HTMLElement} progressContainer - Container element for progress display
+ * @param {HTMLElement} statusMessage - Element for status message display
+ */
+function validateAndUpload(file, progressContainer, statusMessage) {
+ // Create progress element for this file
+ const fileProgress = document.createElement("div");
+ fileProgress.className = "flex flex-col mb-2";
+ fileProgress.innerHTML = `
+
+ ${file.name}
+ ${formatFileSize(file.size)}
+
+
+ Validating...
+ `;
+
+ if (progressContainer) {
+ progressContainer.appendChild(fileProgress);
+ }
+
+ const progressBar = fileProgress.querySelector(".file-progress-bar");
+ const statusEl = fileProgress.querySelector(".file-status");
+
+ // Validate file type by checking both MIME type and extension
+ const isValidMimeType = ACCEPTED_TYPES[file.type] || false;
+ const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
+ const isValidExtension = ACCEPTED_EXTENSIONS.includes(fileExtension);
+
+ if (!isValidMimeType && !isValidExtension) {
+ statusEl.textContent = `Error: ${file.name} - Unsupported file type`;
+ statusEl.className = "text-xs text-red-500 mt-1";
+ return;
+ }
+
+ // Validate file size
+ if (file.size > MAX_FILE_SIZE) {
+ statusEl.textContent = `Error: ${file.name} - File size exceeds 500MB limit`;
+ statusEl.className = "text-xs text-red-500 mt-1";
+ return;
+ }
+
+ // Upload the file
+ uploadFile(file, progressBar, statusEl, statusMessage);
+}
+
+/**
+ * Upload a file to the server
+ * @param {File} file - File to upload
+ * @param {HTMLElement} progressBar - Progress bar element
+ * @param {HTMLElement} statusEl - Status element
+ * @param {HTMLElement} statusMessage - Overall status message element
+ */
+async function uploadFile(file, progressBar, statusEl, statusMessage) {
+ statusEl.textContent = `Uploading...`;
+ try {
+ let formData = new FormData();
+ formData.append("file", file);
+
+ const xhr = new XMLHttpRequest();
+ xhr.open("POST", "/api/ui-upload", true);
+
+ xhr.upload.onprogress = (e) => {
+ if (e.lengthComputable) {
+ const percentComplete = (e.loaded / e.total) * 100;
+ progressBar.style.width = percentComplete + "%";
+ statusEl.textContent = `Uploading: ${Math.round(percentComplete)}%`;
+ }
+ };
+
+ xhr.onload = function() {
+ if (xhr.status === 200) {
+ const result = JSON.parse(xhr.responseText);
+ progressBar.style.width = "100%";
+ progressBar.className = "file-progress-bar bg-green-500 h-2 rounded-full";
+ statusEl.textContent = `Success: Task ID: ${result.task_id}`;
+ statusEl.className = "text-xs text-green-600 mt-1";
+ updateOverallStatus(statusMessage);
+ } else {
+ throw new Error(`Upload failed with status ${xhr.status}`);
+ }
+ };
+
+ xhr.onerror = function() {
+ throw new Error("Network error occurred");
+ };
+
+ xhr.send(formData);
+
+ } catch (err) {
+ statusEl.textContent = `Error: ${err.message}`;
+ statusEl.className = "text-xs text-red-500 mt-1";
+ progressBar.className = "file-progress-bar bg-red-500 h-2 rounded-full";
+ updateOverallStatus(statusMessage);
+ }
+}
+
+/**
+ * Update the overall status message based on file statuses
+ * @param {HTMLElement} statusMessage - Status message element
+ */
+function updateOverallStatus(statusMessage) {
+ if (!statusMessage) return;
+
+ // Count success/failure
+ const fileStatuses = document.querySelectorAll('.file-status');
+ let completed = 0;
+ let total = fileStatuses.length;
+
+ fileStatuses.forEach(status => {
+ if (status.textContent.includes('Success') || status.textContent.includes('Error')) {
+ completed++;
+ }
+ });
+
+ if (completed === total) {
+ statusMessage.textContent = `All uploads completed (${completed}/${total})`;
+ } else {
+ statusMessage.textContent = `Uploading files (${completed}/${total})`;
+ }
+}
+
+/**
+ * Format file size for display
+ * @param {number} bytes - File size in bytes
+ * @returns {string} Formatted file size
+ */
+function formatFileSize(bytes) {
+ if (bytes === 0) return '0 Bytes';
+ const k = 1024;
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+/**
+ * Initialize drag-and-drop on an element
+ * @param {HTMLElement} element - Element to enable drag-and-drop on
+ * @param {HTMLElement} progressContainer - Container for progress display
+ * @param {HTMLElement} statusMessage - Element for status messages
+ * @param {Object} options - Additional options
+ */
+function initDragAndDrop(element, progressContainer, statusMessage, options = {}) {
+ if (!element) {
+ console.error("Element not found for drag-and-drop initialization");
+ return;
+ }
+
+ // Add event listeners for drag-and-drop
+ element.addEventListener("dragover", (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ e.dataTransfer.dropEffect = "copy";
+
+ // Add visual feedback
+ if (options.dragOverClass) {
+ element.classList.add(options.dragOverClass);
+ }
+ });
+
+ element.addEventListener("dragleave", (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ // Remove visual feedback
+ if (options.dragOverClass) {
+ element.classList.remove(options.dragOverClass);
+ }
+ });
+
+ element.addEventListener("drop", (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ // Remove visual feedback
+ if (options.dragOverClass) {
+ element.classList.remove(options.dragOverClass);
+ }
+
+ if (e.dataTransfer.files.length) {
+ processFiles(e.dataTransfer.files, progressContainer, statusMessage);
+ }
+ });
+}
diff --git a/frontend/templates/files.html b/frontend/templates/files.html
index 6d6d0560..0d780e16 100644
--- a/frontend/templates/files.html
+++ b/frontend/templates/files.html
@@ -3,7 +3,100 @@
{% block head_extra %}
+