refly-ai/refly

Support direct upload and card creation when dragging or pasting images onto the canvas

Open

#713 opened on Apr 16, 2025

View on GitHub
 (0 comments) (0 reactions) (1 assignee)TypeScript (7,331 stars) (712 forks)user submission
enhancementgood first issue

Description

Is your feature request related to a problem? Please describe. Currently, when a user drags an image onto the canvas, the system does not automatically upload the image and create a new card. The user would like a feature that allows seamless image uploading and card generation through a drag-and-drop interaction. This would improve the user experience by making image insertion more convenient and streamlined.

Describe the solution you'd like A clear and concise description of what you want to happen.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

Contributor guide

Tech stack
typescript
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
File handlingDrag and drop APICanvas basicsState management
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
35
Research direction
Investigate the existing canvas component and its drag and drop event handling. Search for any existing image upload functionality in the codebase. Review the card data model and creation workflow to understand how to generate a new card from an uploaded image. Check the project's API endpoints for file uploads.