Skip to content

feat(ui): enhance drag-and-drop upload feedback with animated icon an…#599

Open
NaitikVerma6776 wants to merge 2 commits into
param20h:devfrom
NaitikVerma6776:feat/upload-drag-feedback-v3
Open

feat(ui): enhance drag-and-drop upload feedback with animated icon an…#599
NaitikVerma6776 wants to merge 2 commits into
param20h:devfrom
NaitikVerma6776:feat/upload-drag-feedback-v3

Conversation

@NaitikVerma6776

Copy link
Copy Markdown
Contributor

📋 PR Checklist


🔗 Related Issue

Closes #557


📝 What does this PR do?

The core drag-and-drop highlight feature was already implemented in
DocumentSidebar.tsx via react-dropzone's isDragActive state
(border highlight, background change, "Drop files here" message in 4 languages,
auto-reset on drag leave/drop).

This PR adds extra visual and accessibility polish on top of the existing feature:

Improvements:

  • Icon swaps to an animated bouncing UploadCloud icon during drag (vs static Upload icon)
  • "Drop files here" text turns primary color + bold during drag for stronger visual feedback
  • Added aria-live="polite" so screen readers announce the drop message change

🗂️ Type of Change

  • 🐛 Bug fix
  • ✨ New feature
  • 🔧 Refactor / code cleanup
  • 📝 Documentation update
  • 🎨 UI / styling change
  • ⚙️ CI / tooling / config change
  • 🧪 Tests

🧪 How was this tested?

  • Ran the frontend locally (npm run dev inside frontend/)
  • Ran the backend locally (uvicorn app.main:app --reload)
  • Tested the affected API endpoints manually
  • Added / updated tests

Verified npm run lint (0 errors) and npm run build pass successfully.


📸 Screenshots (if UI change)

N/A — toolbar UI improvement, visible when dragging a file over the upload area


⚠️ Anything to flag for reviewers?

  • Core drag-and-drop highlight/message functionality already existed and is untouched
  • Only additive styling and accessibility improvements — no changes to onDrop, validation, or upload logic
  • Existing upload functionality continues to work correctly

✅ Self-Review Checklist

  • My branch is based on dev, not main
  • I have not added any secrets / API keys
  • I have not modified main branch or any HuggingFace deployment config
  • My code follows the existing style (no unnecessary formatting changes)
  • I have updated relevant docs / comments if needed

@NaitikVerma6776

Copy link
Copy Markdown
Contributor Author

Note: The "Run backend pytest suite with coverage" failure is pre-existing on devbackend/app/services/layout_parser.py imports pymupdf4llm but it's missing from requirements.txt (only PyMuPDF is listed, which is a different package). This is unrelated to this PR, which only modifies frontend/src/components/document/DocumentSidebar.tsx.

I've opened a separate PR to fix this dependency issue #601. so kindly merge this issue and assign the upcoming issue to resolve unnecessary fails.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEAT] : Add Drag-and-Drop Visual Feedback for Upload Area

1 participant