feat(ui): full-page drag-and-drop upload overlay with hover animations#681
Merged
Merged
Conversation
Contributor
Author
|
Hi @param20h please review the PR when you get a chance. Thanks! |
param20h
approved these changes
Jun 24, 2026
|
🎉 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! ✨ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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 attacheswindow-level
dragenter/dragleave/droplisteners, uses aref-based counter to avoid flickering from nested elements, and filters
files by extension before calling
onDropfrontend/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 rendersthe overlay; dropped files are uploaded via the existing
api.postFormpipeline and the document list refreshes on completionAnimations:
fade-inon mountzoom-in-95 fade-inon mountanimate-pingpulse +animate-bounceiconanimate-in— no extra dependenciesBehaviour:
disabledprop) when user is not authenticatedcontinues with remaining files)
🗂️ Type of Change
✅ Self-Review Checklist
dev, notmainmainor HuggingFace deployment configReact built-ins
role="region",aria-label, andaria-live="assertive"