Skip to content

feat(ui): full-page drag-and-drop upload overlay with hover animations#681

Merged
param20h merged 1 commit into
param20h:devfrom
nancysangani:feat/drag-drop-overlay
Jun 24, 2026
Merged

feat(ui): full-page drag-and-drop upload overlay with hover animations#681
param20h merged 1 commit into
param20h:devfrom
nancysangani:feat/drag-drop-overlay

Conversation

@nancysangani

Copy link
Copy Markdown
Contributor

Closes #417

📝 What does this PR do?

Adds a full-page drag-and-drop upload zone that activates whenever the
user drags accepted files anywhere over the dashboard window — not just
over the small upload box in the sidebar.

New files:

  • frontend/src/hooks/useDashboardDrop.ts — custom hook that attaches
    window-level dragenter / dragleave / drop listeners, uses a
    ref-based counter to avoid flickering from nested elements, and filters
    files by extension before calling onDrop
  • frontend/src/components/document/DashboardDropOverlay.tsx — full-
    screen overlay with blurred backdrop, animated dashed border card,
    pulsing icon ring, and bouncing upload icon

Modified:

  • frontend/src/app/dashboard/page.tsx — wires up the hook and renders
    the overlay; dropped files are uploaded via the existing
    api.postForm pipeline and the document list refreshes on completion

Animations:

  • Backdrop: fade-in on mount
  • Card: zoom-in-95 fade-in on mount
  • Icon ring: animate-ping pulse + animate-bounce icon
  • All powered by Tailwind animate-in — no extra dependencies

Behaviour:

  • Only activates for accepted MIME types (PDF, DOCX, TXT, MD)
  • Drag counter ref prevents flicker when cursor moves over child elements
  • Overlay is disabled (disabled prop) when user is not authenticated
  • Multiple files dropped simultaneously are all uploaded sequentially
  • Falls back gracefully if any individual file fails (logs error,
    continues with remaining files)
  • Existing sidebar dropzone is unchanged — both work independently

🗂️ Type of Change

  • ✨ New feature

✅ Self-Review Checklist

  • Branch based on dev, not main
  • No secrets / API keys added
  • No changes to main or HuggingFace deployment config
  • No new dependencies — uses only existing Tailwind utilities and
    React built-ins
  • Accessible — overlay has role="region", aria-label, and
    aria-live="assertive"

@nancysangani

Copy link
Copy Markdown
Contributor Author

Hi @param20h please review the PR when you get a chance. Thanks!

@param20h param20h merged commit 7e6f1d5 into param20h:dev Jun 24, 2026
8 checks passed
@github-actions github-actions Bot added gssoc GirlScript Summer of Code 2026 issue/PR gssoc:approved Approved for GSSoC base points (+50 pts) level:intermediate +35 pts mentor:param20h Mentor for this PR type:frontend Frontend UI/UX labels Jun 24, 2026
@github-actions

Copy link
Copy Markdown

🎉 Congratulations on getting your Pull Request merged! 🎉

Thank you for contributing to PDF-Assistant-RAG as part of GSSoC '26! 🚀

Keep up the great work! ✨

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 type:frontend Frontend UI/UX

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(ui): Implement drag-and-drop file upload zone with hover animations

2 participants