Fix file validation and add upload progress UI (#142)

[uv05709]

Fix: Secure File Upload Validation + Progress UI + Upload Cancellation

Related Issue

Closes #142

---

📌 Summary

This PR fixes critical security and UX issues in the file upload system by adding:

• Client-side file validation

• File size restrictions

• Upload progress tracking

• Upload cancellation support

• Inline error/success feedback

• Better handling for failed uploads

The previous implementation allowed unrestricted uploads with no validation or progress visibility, creating both security and usability problems.

---

✅ Changes Made

1. Added File Validation Utility

Created lib/fileValidation.ts to validate:

• File size

• MIME types

• Dangerous file extensions

Blocked unsafe files like:

• .exe

• .sh

• .bat

• .cmd

• .php

• .dll

Also added a configurable 10MB upload limit.

---

2. Added useFileUpload Hook

Created reusable upload hook with:

• Upload state management

• Real-time progress tracking using XMLHttpRequest

• Upload cancellation support

• Network/server error handling

• Reset functionality

States handled:

• idle

• validating

• uploading

• success

• error

• cancelled

---

3. Updated File Upload Component

Reworked upload UI to include:

• Progress bar

• Upload percentage

• Filename preview

• Cancel upload button

• Error messages

• Success feedback

Accessibility improvements:

• aria-label

• role="progressbar"

• role="alert"

---

4. Added Upload Styles

Created styles/fileUpload.css for:

• Progress UI

• Error/success states

• Responsive upload feedback

---

📂 Files Added / Modified

File | Change -- | -- lib/fileValidation.ts | Added validation utility hooks/useFileUpload.ts | Added upload hook components/chat/FileUpload.tsx | Updated upload component styles/fileUpload.css | Added upload styles

---

🚀 Result

This PR improves:

• Security

• User experience

• Accessibility

• Upload reliability

• Reusability of upload logic

It also creates a foundation for future enhancements such as:

• Multiple file uploads

• Drag & drop support

• Retry uploads

• Chunked uploads

---

GSSoC Contribution

Submitted under GSSoC 2026.

[vercel]

@uv05709 is attempting to deploy a commit to the Sameer's projects Team on Vercel.

A member of the Team first needs to authorize it.

[uv05709]

@ThePlator merge my PR