Skip to content

Improve visual feedback in MemoEditor for drag/drop file uploads #4634

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Apr 18, 2025

Conversation

sawatkins
Copy link
Contributor

Improve drag/drop file upload experience with better visual feedback and state management. This enhances clarity and usability.

Changes:

  • Allow file drop on entire area of MemoEditor
  • Add clear drag/drop visual feedback with dashed border, cursor: copy, and loading spinner
  • Pass isUploadingResource from MemoEditor to UploadResourceButton as a prop to always display spinner during active uploads
  • Add isDraggingFile state in MemoEditor to track drag UI state
20250416_123429.mp4

@sawatkins sawatkins requested a review from boojack as a code owner April 16, 2025 19:48
@johnnyjoygh johnnyjoygh requested a review from Copilot April 17, 2025 02:10
Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR improves the drag/drop file upload experience in the MemoEditor by extending the drop area, adding visual cues, and managing upload state more explicitly.

  • Introduces a new isDraggingFile state in MemoEditor for drag event tracking.
  • Updates the MemoEditor drop zone styling and event handlers to reflect drag state.
  • Passes isUploadingResource to UploadResourceButton and updates its behavior accordingly.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File Description
web/src/components/MemoEditor/index.tsx Adds state and drag event handling for file drops with corresponding UI updates and error handling refinements.
web/src/components/MemoEditor/ActionButton/UploadResourceButton.tsx Adjusts UploadResourceButton to accept an isUploadingResource prop and disables the component while an upload is in progress.
Comments suppressed due to low confidence (2)

web/src/components/MemoEditor/index.tsx:226

  • Consider providing a fallback error message in case error.details is undefined to ensure the user always sees a clear error alert during file uploads.
toast.error(error.details);

web/src/components/MemoEditor/ActionButton/UploadResourceButton.tsx:70

  • Consider providing a fallback error message in the catch block to handle cases where error.details might be undefined, thereby improving clarity in the error notifications.
toast.error(error.details);

Copy link
Collaborator

@johnnyjoygh johnnyjoygh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@johnnyjoygh johnnyjoygh merged commit bb892be into usememos:main Apr 18, 2025
2 checks passed
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.

2 participants