Skip to content

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

Merged
param20h merged 2 commits into
param20h:devfrom
NaitikVerma6776:feat/upload-drag-feedback-v3
Jun 20, 2026
Merged

feat(ui): enhance drag-and-drop upload feedback with animated icon an…#599
param20h merged 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

NaitikVerma6776 commented Jun 14, 2026

Copy link
Copy Markdown
Contributor Author

🐛 Backend CI fails: ModuleNotFoundError: No module named 'pymupdf4llm'

pymupdf4llm is listed in requirements.txt, but CI fails with ModuleNotFoundError during pytest collection.

Possible cause: pip install -r backend/requirements.txt --quiet || true in ci.yml silently ignores install failures. If pymupdf4llm fails to install (version conflict with unpinned PyMuPDF, build error, etc.), CI continues and fails later at import time without showing the real error.

Suggested debug step: remove || true temporarily or add pip show pymupdf4llm after install to see the actual install error.

This blocks the backend test suite for all PRs currently.

@NaitikVerma6776 NaitikVerma6776 force-pushed the feat/upload-drag-feedback-v3 branch from 36aa076 to c72b993 Compare June 20, 2026 08:26
@NaitikVerma6776

Copy link
Copy Markdown
Contributor Author

Hey @param20h, all CI checks are now passing ✅

This PR enhances the drag-and-drop upload feedback in the document sidebar:

  • Animated UploadCloud icon appears during drag (replaces static Upload icon)
  • "Drop files here" text turns primary color + bold for stronger visual feedback
  • Added aria-live="polite" for screen reader accessibility

Would love your review when you get a chance 🙏 Actively contributing as part of GSSoC '26

@param20h param20h merged commit 72d0318 into param20h:dev Jun 20, 2026
7 checks passed
@github-actions github-actions Bot added enhancement New feature or improvement gssoc GirlScript Summer of Code 2026 issue/PR gssoc:approved Approved for GSSoC base points (+50 pts) mentor:param20h Mentor for this PR labels Jun 20, 2026
@param20h param20h added level:intermediate +35 pts quality:clean 1.2x multiplier type:bug +10 pts and removed enhancement New feature or improvement labels Jun 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc:approved Approved for GSSoC base points (+50 pts) gssoc GirlScript Summer of Code 2026 issue/PR level:intermediate +35 pts mentor:param20h Mentor for this PR quality:clean 1.2x multiplier type:bug +10 pts

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants