●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Drag-and-drop file area with click-to-select fallback (InputFile) and visual drag state.
- Multiple file selection and client-side listing of selected files.
- Bootstrap table display with columns for filename, formatted size, content type, and category select.
- Per-row InputSelect binding to store a chosen category.
- Loading indicator state while files are processed and simple file size formatting.
## Key components
- InputFile (OnChange handler and GetMultipleFiles)
- InputSelect with @bind-Value for per-file category selection
- HTML table (Bootstrap .table, .table-striped, .table-hover)
- FileDisplayModel (FileName, FileSize, ContentType, SelectedCategory)
- Drag event handlers: @ondragenter, @ondragleave, @ondragover, @ondrop
- Component-scoped CSS (FileDropGrid.razor.css) and Bootstrap layout on the demo page
- Methods: HandleFileSelected, FormatFileSize, HandleDragEnter/Leave/Over/Drop
## How it works
- InputFile.OnChange triggers HandleFileSelected which calls GetMultipleFiles and maps IBrowserFile metadata into FileDisplayModel instances.
- The component maintains an uploadedFiles list and toggles isLoadingFiles and isDragOver to drive UI states; StateHasChanged is used for immediate updates.
- Per-row category selects use InputSelect with @bind-Value to keep selections on each FileDisplayModel.
- Drag event handlers primarily toggle visual state; actual file processing relies on InputFile because DataTransfer handling is limited in simple Blazor apps.
## Styling
- Demo page uses Bootstrap grid and card classes (container, row, col-md-*, card, card-body).
- File drop zone styling is implemented in component-scoped CSS: .file-drop-zone, .drag-over, invisible absolute InputFile (.file-input-control) that covers the area.
- Font Awesome icons are referenced in markup for the cloud upload icon; include the asset in the host page for the same look.
- Layout is responsive via Bootstrap column classes; table uses responsive .table-responsive wrapper.
## Reuse steps
1. Add the FileDisplayModel and FileDropGrid.razor/.razor.css files to a Blazor project.
2. Ensure Microsoft.AspNetCore.Components.Forms is available (already part of Blazor) and reference Bootstrap CSS and Font Awesome in index.html/_Host.
3. Place FileDropGridDemoPage.razor in Pages and register the route or link from navigation.
4. Optionally store IBrowserFile in the model and implement server upload endpoints (streaming via HttpClient or a server API).
5. Add validation, size/type limits, and progress reporting when wiring actual uploads.
## Limitations & next steps
- This component lists file metadata only; no server upload or persistent storage is implemented.
- IBrowserFile is commented out; store and stream large files using IBrowserFile.OpenReadStream and a server endpoint for production.
- Add proper validation, progress UI, error handling, authentication/authorization, and accessibility improvements (keyboard focus, ARIA labels).
- Consider paging or virtualization for large file lists and cancellation for long uploads.
Note: Generated by Instruct UI as an editable single-page component; integrate backend services and security when adding to a full application.