Skip to content

feat: Add drag-and-drop CSV upload for batch stream creation #148

Description

@Austinaminu2

Description

The batch stream creation feature currently requires clicking a file input to select a CSV. Adding drag-and-drop support would improve the UX significantly, especially for users creating many streams at once (payroll, airdrops).

Proposed Solution

  • Add a drop zone component to the batch creation page
  • Support drag-and-drop for .csv files
  • Show visual feedback (border highlight, icon change) when a file is dragged over
  • Validate file type on drop (reject non-CSV with a clear error)
  • Show a preview table of parsed rows before submission
  • Keep the existing click-to-upload as a fallback

Design Reference

┌─────────────────────────────────────┐
│                                     │
│    📄 Drag & drop your CSV here    │
│       or click to browse            │
│                                     │
│    Supports: .csv (max 500 rows)    │
└─────────────────────────────────────┘

Acceptance Criteria

  • Drop zone accepts .csv files via drag-and-drop
  • Visual feedback on drag-over (highlighted border, background change)
  • File type validation with clear error for non-CSV files
  • Preview table shows parsed data before submission
  • Click-to-browse fallback remains functional
  • Works on mobile (fallback to file input only)

Metadata

Metadata

Assignees

No one assigned

    Labels

    featureNew feature requestfrontendNext.js frontenduxUser experience improvement

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions