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

    Fields

    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