bergerb / bergerb/DailyOneRosterFile
Add Validation Tab with File Upload
- Dominant language
- C#
- Stars
- 0
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
## Overview
Add a new "Validation" tab to the frontend that allows users to upload OneRoster.zip files and receive validation results from the OneRoster validator.
## Background
The current frontend is a single-page download landing page with no navigation or upload capabilities. This feature adds a tabbed interface with a file upload/validation view, enabling users to validate their own OneRoster files against the OneRoster 1.1 specification.
## Requirements
### Frontend
1. **Tab Navigation**:
- Add tab navigation with "Download" and "Validation" tabs
- Default to "Download" tab (existing functionality)
- Visual tab indicators matching existing design language
2. **Validation Tab UI**:
- File upload area (drag-and-drop + click to browse)
- Accept only `.zip` files
- File size limit indicator (e.g., max 15MB)
- Upload progress indicator
- Validation results display area
3. **Validation Results Display**:
- Show validation status (Valid/Invalid)
- List errors with clear formatting
- List warnings with clear formatting
- Timestamp of validation
- Option to validate another file
4. **Responsive Design**:
- Works on mobile and desktop
- Matches existing glassmorphism design system
### Backend
1. **New API Endpoint**:
- `POST /api/files/validate` - Accepts file upload, returns validation results
- Accepts `multipart/form-data` with `.zip` files only
- Returns JSON with `isValid`, `errors`, `warnings`, `validatedAt`
2. **File Handling**:
- Temporary storage for uploaded files (cleanup after validation)
- File size validation (max 15MB)
- ZIP file validation before processing
3. **Security**:
- File type validation (only .zip)
- File size limits
- No persistent storage of uploaded files
- Cleanup of temporary files after validation
## Technical Design
### Frontend Components
#### 1. Tab Navigation
```tsx
// New component: src/components/TabNavigation.tsx
interface Tab {
id: string;
label: string;
}
const tabs: Tab[] = [
{ id: 'download', label: 'Download' },
{ id: 'validation', label: 'Validation' }
];
```
#### 2. File Upload Component
```tsx
// New component: src/components/FileUpload.tsx
interface FileUploadProps {
onFileSelect: (file: File) => void;
isUploading: boolean;
accept?: string;
}
```
#### 3. Validation Results Component
```tsx
// New component: src/components/ValidationResults.tsx
interface ValidationResult {
isValid: boolean;
errors: string[];
warnings: string[];
validatedAt: string;
}
```
### Backend Changes
#### 1. New Controller Endpoint
```csharp
// FilesController.cs
[HttpPost("validate")]
[ValidateAntiForgeryToken]
public async Task ValidateOneRosterFile(IFormFile file)
{
// Validate file type and size
// Save to temporary location
// Run validation
// Return results
// Cleanup temporary file
}
```
#### 2. Validation Service Integration
- Use existing `IOneRosterValidator` from Issue #8
- Add file upload handling logic
- Add temporary file management
### Data Flow
```
User selects file → Frontend validates type/size →
POST /api/files/validate → Backend saves temp file →
Run validation checks → Return JSON results →
Cleanup temp file → Display results to user
```
## Implementation Steps
### Phase 1: Backend (Issue #8 dependency)
1. Ensure `IOneRosterValidator` is implemented (from Issue #8)
2. Add file upload endpoint to `FilesController`
3. Add temporary file management service
4. Add file type/size validation
5. Write unit tests for upload endpoint
### Phase 2: Frontend - Tab Navigation
1. Add tab navigation component
2. Refactor `App.tsx` to use tabbed layout
3. Move existing download content to "Download" tab
4. Add tab state management
### Phase 3: Frontend - Validation Tab
1. Create file upload component with drag-and-drop
2. Create validation results display component
3. Add API integration for file upload
4. Add loading states and error handling
5. Add responsive styling
### Phase 4: Integration & Testing
1. Test file upload flow end-to-end
2. Test validation results display
3. Test responsive design
4. Test error scenarios (invalid files, large files, etc.)
## Testing Strategy
### Frontend Tests
- Component rendering tests
- File upload interaction tests
- API integration tests
- Responsive design tests
### Backend Tests
- File upload endpoint tests
- File type validation tests
- File size validation tests
- Temporary file cleanup tests
## Success Criteria
- Users can switch between Download and Validation tabs
- Users can upload .zip files via drag-and-drop or file picker
- Validation results display correctly with errors and warnings
- File upload is secure (type checking, size limits)
- Temporary files are cleaned up after validation
- UI matches existing design language
- Responsive on mobile and desktop
## Dependencies
- Issue #8: OneRoster Validator API endpoint
- Existing `IOneRosterValidator` service
## Related Issues
- Issue #8: Add OneRoster Validator Feature (API endpoint)
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reviewing Issue #8 and the existing IOneRosterValidator, then inspect FilesController.cs, App.tsx, and the planned TabNavigation.tsx, FileUpload.tsx, and ValidationResults.tsx components. Work through the backend and frontend phases, using the listed upload, validation, cleanup, and responsive-design tests as checkpoints. Done means users can upload valid ZIP files, see validation results, and receive secure handling for invalid or oversized files.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- csharp, typescript
- Domain
- api, full-stack, security, testing
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100