Add drag and drop file upload to Document Upload dialog

Feature Request

Description

Add drag and drop file upload capability to the Upload Document dialog in the RFQ module. Currently users must click "Choose File" to select a document, but drag and drop would provide a more intuitive user experience.

Current Behavior

• Users must click the "Choose File" button to open a file browser
• No visual indication that drag and drop is supported

Proposed Enhancement

Add drag and drop zone functionality to the file selection area:

1. Visual Drop Zone: Style the file input area as a drop zone with a dashed border
2. Drag Feedback: Visual feedback when dragging files over the drop zone (highlight/change border color)
3. Drop Handling: Accept dropped files and populate the file input
4. Validation: Apply the same file type and size validation (PDF, Word, Excel, Images, Email, Text files - Max 50 MB)

Acceptance Criteria

• [ ] Users can drag files from their desktop/file explorer onto the upload dialog
• [ ] Drop zone provides visual feedback (hover state) when files are dragged over it
• [ ] Dropped files are validated against allowed types and size limits
• [ ] Error messages display for invalid file types or oversized files
• [ ] Single file drop only (matches current single-file upload behavior)
• [ ] Works across modern browsers (Chrome, Firefox, Edge, Safari)

UI/UX Suggestions

• Replace or augment the current file input with a styled drop zone
• Add instructional text: "Drag and drop file here, or click to browse"
• Add an icon (e.g., cloud upload icon) to the drop zone
• Show file name and size after selection (whether via drag/drop or browse)

Technical Considerations

• Implement using HTML5 Drag and Drop API
• Can be added to the existing document-preview.js file or as a separate reusable component
• Should integrate with the existing form submission logic

Related Files

• src/ProAlert.Web/wwwroot/js/document-preview.js
• RFQ Document Upload modal (likely in a Razor view)

Screenshot Reference

Current dialog appearance (from issue):

• File input with "Choose File" button
• Document Type dropdown
• Caption and Notes fields