62 lines
1.6 KiB
Markdown
62 lines
1.6 KiB
Markdown
# 20. Create File Picker UI for Import
|
|
|
|
meta:
|
|
id: podcast-tui-app-20
|
|
feature: podcast-tui-app
|
|
priority: P1
|
|
depends_on: [19]
|
|
tags: [file-picker, input, ui, solidjs, opentui]
|
|
|
|
objective:
|
|
- Create file picker component for selecting import files
|
|
- Implement file format detection
|
|
- Display file information
|
|
- Handle file selection and validation
|
|
|
|
deliverables:
|
|
- `src/components/FilePicker.tsx` with file picker UI
|
|
- `src/components/FileInfo.tsx` with file details
|
|
- `src/utils/file-detector.ts` with format detection
|
|
|
|
steps:
|
|
- Create `src/utils/file-detector.ts`:
|
|
- `detectFormat(file: File): 'json' | 'xml' | 'unknown'`
|
|
- Read file header
|
|
- Check file extension
|
|
- Validate format
|
|
- Create `src/components/FilePicker.tsx`:
|
|
- File input using `<input>` component
|
|
- Accept JSON and XML files
|
|
- File selection handler
|
|
- Clear button
|
|
- Create `src/components/FileInfo.tsx`:
|
|
- Display file name
|
|
- Display file size
|
|
- Display file format
|
|
- Display last modified date
|
|
- Add file picker to import dialog
|
|
|
|
tests:
|
|
- Unit: Test format detection
|
|
- Unit: Test file picker selection
|
|
- Integration: Test file validation
|
|
|
|
acceptance_criteria:
|
|
- File picker allows selecting files
|
|
- Format detection works correctly
|
|
- File information is displayed
|
|
- Invalid files are rejected
|
|
|
|
validation:
|
|
- Run application and test file picker
|
|
- Select valid files
|
|
- Select invalid files
|
|
- Verify format detection
|
|
|
|
notes:
|
|
- Use OpenTUI `<input>` component for file picker
|
|
- Accept `.json` and `.xml` extensions
|
|
- Check file size limit (e.g., 10MB)
|
|
- Add file type validation
|
|
- Handle file selection errors
|