Enhanced UI with advanced features and improved upload system

README.md

@@ -6,15 +6,53 @@ Free serverless backend with a limit of 100,000 invocation requests per day.
 
 ## Features
 
-- Upload large files
-- Create folders
-- Search files
-- Image/video/PDF thumbnails
-- WebDAV endpoint
-- Drag and drop upload
+### File Management
+- **Upload large files** - Support for files of any size with chunked uploads
+- **Create folders** - Organize your files with folder structure
+- **Drag and drop upload** - Enhanced drag & drop interface with visual feedback
+- **Multi-file operations** - Select multiple files for bulk operations
+- **File operations** - Download, rename, delete, copy link
+
+### User Interface
+- **Dual view modes** - Switch between grid and list view
+- **Advanced search** - Smart fuzzy search with exact match toggle
+- **Flexible sorting** - Sort by name, size, or date modified
+- **Floating upload progress** - Real-time upload tracking with cancel option
+- **Responsive design** - Works seamlessly on desktop and mobile
+
+### Media & Preview
+- **Image/video/PDF thumbnails** - Visual preview for supported file types
+- **File type icons** - Clear visual indicators for different file types
+- **Breadcrumb navigation** - Easy folder navigation
+
+### Integration & Access
+- **WebDAV endpoint** - Standard protocol support for third-party clients
+- **Authentication system** - Secure login with customizable credentials
+- **Public read option** - Optional public access to files
+- **Direct file links** - Share files with copyable URLs
 
 ## Usage
 
+### User Interface Guide
+
+#### File Upload
+- **Drag & Drop**: Simply drag files from your computer into the browser window
+- **Upload Button**: Click the floating upload button (bottom-right) to select files
+- **Upload Progress**: Monitor uploads with the floating progress indicator
+- **Cancel Uploads**: Cancel in-progress uploads if needed
+
+#### File Management
+- **View Modes**: Switch between grid view (thumbnails) and list view (detailed)
+- **Sorting**: Sort files by name, size, or modification date
+- **Search**: Use fuzzy search for flexible file finding, or exact search for precise matching
+- **Multi-select**: Right-click or long-press to select multiple files
+- **File Operations**: Download, rename, delete files, or copy shareable links
+
+#### Navigation
+- **Folders**: Click on folders to navigate, use breadcrumbs to go back
+- **Search Results**: View how many files match your search query
+- **File Statistics**: See total files and filtered results in real-time
+
 ### Installation
 
 Before starting, you should make sure that
@@ -49,6 +87,70 @@ Fill the endpoint URL as `https://<your-domain.com>/webdav` and use the username
 However, the standard WebDAV protocol does not support large file (≥128MB) uploads due to the limitation of Cloudflare Workers.
 You must upload large files through the web interface which supports chunked uploads.
 
+## Technical Features
+
+### Upload System
+- **Chunked uploads** for files ≥100MB with progress tracking
+- **Concurrent upload** support with queue management
+- **Upload cancellation** with proper cleanup
+- **Retry mechanism** for failed uploads
+- **Thumbnail generation** for images, videos, and PDFs
+
+### Search & Filter
+- **Fuzzy search algorithm** with Levenshtein distance and n-gram similarity
+- **Real-time filtering** with instant results
+- **Search statistics** showing matched/total files
+- **Case-insensitive** search with accent support
+
+### Performance
+- **Optimized file parsing** with XML sanitization and fallback
+- **Efficient rendering** with virtual scrolling for large file lists
+- **Responsive UI** with smooth transitions and loading states
+- **Memory management** with proper cleanup of upload resources
+
+### Security
+- **Authentication system** with secure credential storage
+- **CORS handling** for cross-origin requests
+- **Input sanitization** for file names and metadata
+- **Error handling** with user-friendly messages
+
+## Development
+
+### Local Development
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm start
+
+# Build for production
+npm run build
+```
+
+### Debug Features
+- **Comprehensive logging** throughout upload and file operations
+- **Upload debugging** with detailed progress and error tracking
+- **Test upload button** (localhost only) for UI component testing
+- **Console debugging** with step-by-step operation logs
+
+### Project Structure
+```
+src/
+├── components/          # UI components
+│   ├── FileGrid.tsx    # Grid view component
+│   ├── FileList.tsx    # List view component
+│   ├── Header.tsx      # Main header with toolbar
+│   └── ...            # Other components
+├── utils/              # Utility modules
+│   ├── fuzzySearch.ts  # Advanced search algorithms
+│   ├── uploadManager.ts # Upload queue management
+│   └── xmlParser.ts    # XML parsing utilities
+├── app/                # Core application logic
+│   └── transfer.ts     # File operations and API calls
+└── ...                # Other files
+```
+
 ## Acknowledgments
 
 WebDAV related code is based on [r2-webdav](

UPLOAD_DEBUG.md

@@ -0,0 +1,126 @@
+# FlareDrive Upload Debug Guide
+
+## Debug Improvements Added
+
+### 1. Enhanced Logging Throughout Upload Flow
+
+#### Upload Manager (uploadManager.ts)
+- Logs when uploads are added with their IDs
+- Logs status changes for each upload
+- Logs progress updates with detailed upload info
+
+#### Transfer Module (transfer.ts)  
+- Logs when `processUploadQueue` is called with queue length
+- Logs each file being processed with uploadId and manager status
+- Logs actual upload start
+- Logs XHR requests with URLs
+- Logs upload progress events in XHR
+- Logs response status and errors
+- Enhanced error messages for failed uploads
+
+#### Main Component (Main.tsx)
+- Logs upload manager creation
+- Detailed logging of upload progress updates with:
+  - Upload count
+  - Each upload's ID, filename, status, and progress
+- Logs when component mounts with manager status
+
+#### FloatingUploadProgress Component
+- Logs render events with upload count and visibility
+- Detailed logging of each upload's state
+- Logs when component is hidden/shown
+
+#### UploadDrawer Component  
+- Logs when files are added from drawer with IDs
+- Logs upload manager availability
+
+### 2. Test Upload Button
+
+When running on localhost, a green "Test Upload UI" button appears in the bottom-left corner. This button:
+- Creates a test file
+- Adds it to the upload manager
+- Should trigger the FloatingUploadProgress to appear
+- Helps verify if the UI component is working independently of actual uploads
+
+### 3. How to Debug Upload Issues
+
+Open browser Developer Tools (F12) and check the Console tab for:
+
+1. **Upload Manager Initialization**
+   - Look for: "Creating upload manager instance"
+   - Confirms manager is ready
+
+2. **File Selection**
+   - Look for: "Added upload from drawer: [filename] with ID: [id]"
+   - Confirms files are being added to manager
+
+3. **Queue Processing**
+   - Look for: "processUploadQueue called, queue length: [n]"
+   - Should show non-zero queue length
+   - Look for: "Processing upload: [filename]"
+
+4. **Upload Progress**
+   - Look for: "XHR upload progress: [loaded] / [total]"
+   - Should show increasing loaded values
+   - Look for: "Upload progress update - count: [n]"
+   - Should show uploads with changing progress
+
+5. **UI Visibility**
+   - Look for: "FloatingUploadProgress render - uploads: [n]"
+   - Should show non-zero upload count
+   - Look for: "Uploads in FloatingProgress:" followed by upload details
+
+6. **Network Activity**
+   - Check Network tab for PUT requests to `/webdav/[filename]`
+   - Check response status (should be 200-299 for success)
+
+### 4. Common Issues and Solutions
+
+#### Issue: FloatingProgress doesn't appear
+**Check:**
+- Console for "Upload progress update - count: 0"
+- If count is 0, uploads aren't being added to manager
+- Test with the green "Test Upload UI" button
+
+#### Issue: Upload starts but no progress
+**Check:**
+- Network tab for stalled requests
+- Console for "XHR request error" or status errors
+- Authentication headers in requests
+
+#### Issue: Upload completes but UI doesn't update
+**Check:**
+- Console for "Upload completed: [id]"
+- Console for status transition logs
+- FloatingProgress visibility logs
+
+### 5. Quick Test Procedure
+
+1. Open the app in browser
+2. Open Developer Tools (F12) > Console
+3. Click the green "Test Upload UI" button (localhost only)
+4. Check if FloatingUploadProgress appears
+5. If it appears, try uploading a real file
+6. If it doesn't appear, check console for upload manager logs
+
+### 6. Authentication Issues
+
+If uploads fail with 401/403 errors:
+- Check `getAuthHeaders()` is returning correct headers
+- Verify authentication token in localStorage
+- Check Network tab for authorization headers in requests
+
+### 7. File Size Issues
+
+- Files < 100MB use single PUT request
+- Files >= 100MB use multipart upload
+- Check console for "multipart" vs regular upload logs
+
+## Next Steps if Issues Persist
+
+1. Check server logs for upload endpoints
+2. Verify CORS settings if cross-origin
+3. Test with small text files first
+4. Check browser console for any uncaught errors
+5. Verify WebDAV endpoint is accessible
+6. Test upload endpoints manually with curl/Postman