[FE-17] Build /documents/upload page — drag-and-drop zone with file validation and progress bar

[mftee]

Overview

The core user action is uploading a land document for analysis. The upload page must provide clear feedback on file acceptance, validation errors, and upload progress. A good upload experience is critical for user adoption.

Background

File to create: frontend/app/(protected)/documents/upload/page.tsx

Features:

• Drag-and-drop zone (or click to browse) — visual feedback on drag-over state
• Supported file types: PDF, PNG, JPG, JPEG, TIFF (display allowed types to the user)
• Maximum file size: 10MB (display limit to the user)
• File validation before upload: correct extension and size
• Title input field (optional custom name)
• Organization selector (optional — dropdown of orgs the user belongs to)
• Upload progress bar (use axios onUploadProgress callback)

After upload:

• Success: redirect to the new document's detail page (/documents/:id)
• Error: show error message inline without losing the selected file

Acceptance Criteria

• Drag-and-drop works in modern browsers (Chrome, Firefox, Edge)
• Invalid file types are rejected before upload with a clear error message
• Files exceeding 10MB are rejected before upload
• Upload progress bar shows 0–100% based on real upload progress
• Form cannot be submitted twice (button disabled while upload is in progress)

[OmniZlatoon]

@OmniZlatoon has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I ensure you quality work done and expected output for this issue. With my software engineering skills for over 5 years, I guarantee you efficiency in my work.

Please entrust me with this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @OmniZlatoon to this issue.

[Codex723]

@Codex723 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I would like to work on this issue because I'm ready to build the drag-and-drop upload page with file type and size validation, axios-powered progress bar, disabled submit during upload, inline error handling without losing the selected file, and redirect to the document detail page on success.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Codex723 to this issue.

[mijinummi]

@mijinummi has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hello maintainers I'm a full stack developer experience in building scalable systems I can handle this perfectly

ℹ️ Repo Maintainers: To accept this application, review their application or assign @mijinummi to this issue.

[drips-wave]

Congratulations, @mijinummi! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @mijinummi: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[grantfox-oss]

🦊 GrantFox — @mijinummi has been assigned to this issue!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #829)
2. Your PR will be reviewed by the CodeGirlsInc maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox!

@mijinummi's PR #882 was approved and merged by @mftee.

🏆 @mijinummi: You earned 40 FoxPoints for this contribution! Your current tier: Builder (1,391 total points). Track your full progress on GrantFox.

👏 Great work, @mijinummi! Keep contributing to CodeGirlsInc.

[drips-wave]

This issue has been completed by @mijinummi as part of the Stellar Wave Program's 6th Wave 🥳

😎 @mijinummi: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.