AOSSIE-Org / AOSSIE-Org/EduAid

[FEATURE]: Enhance Text_Input with Interactive File Upload UI and Error Boundaries

Offen
#459 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
enhancement
Vorherrschende Sprache
JavaScript
Sterne
171
Forks
423
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

### Feature and its Use Cases

Currently, the Text_Input component lacks adequate visual feedback during file uploads (PDF/MP3). After clicking "Browse File" and selecting a document, the user interface does not reflect the selection, which creates a confusing user experience.

Current UX Gaps (Before):
The user cannot see the name of the file they just selected.
There is no way to cancel or clear a mistakenly selected file.
There are no visual indicators for upload progress or transfer speed, leaving the user guessing if the application is processing or stalled.
There are no error boundaries to visually warn the user if an upload fails.

https://github.com/user-attachments/assets/311dedd5-43c0-4608-bd39-78a1ef332008

Proposed Solution
I have designed and developed a comprehensive, interactive upload UI from scratch to resolve these pain points and elevate the user experience.

Key Features Implemented:
File Visibility & Management: The UI immediately renders the selected file name (e.g., sample.pdf) alongside a functional '✕' button, allowing users to easily clear their selection.
Real-Time Progress: Integrates a smooth, gradient-styled progress bar that tracks the exact percentage of the upload lifecycle.
Dynamic Speed Tracking: Calculates and displays a simulated network transfer speed (e.g., KB/s).
Robust Error Handling: Features a dedicated error state that catches failed uploads and displays a clear red warning message, preventing infinite loading loops.
The Solution in Action (After):

https://github.com/user-attachments/assets/955ef738-f868-4c54-8b58-dbf59ac6a8d8

Error Handling State:

Image

Next Steps
I have already built this feature locally. I will be opening a Pull Request immediately following this issue to propose the code changes for review.

### Additional Context

_No response_

### Code of Conduct

- [x] I have joined the [Discord server](https://discord.gg/hjUhu33uAn) and will post updates there
- [x] I have searched existing issues to avoid duplicates

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.