Implement Notes Upload UI - Connect to Backend Upload Flow

[MRIARC-08]

Notes backend is implemented with PDF/image text extraction:

Backend Status: ✅ Complete

• Upload endpoint: POST /api/notes/upload
• Supports PDF and image files
• Automatic text extraction using OCR
• File validation and error handling

Frontend Work Required:

• File upload form component
• Drag-and-drop support for files
• File type validation (PDF, PNG, JPEG, WEBP)
• Upload progress indicator
• Error message display for failed uploads
• Success confirmation with note preview

Components to Create:

• src/components/NotesUploadForm.tsx - Main upload form
• src/components/FileDropZone.tsx - Drag-and-drop area
• src/components/UploadProgress.tsx - Progress indicator
• Update src/app/notes/upload/page.tsx

Integration Points:

• Call POST /api/notes/upload with FormData
• Include file and title
• Handle NotesApiError responses
• Show upload status to user
• Redirect to notes page on success

Expected Outcome: Users can upload and extract text from notes.

Related to backend: Notes Upload and Text Extraction (PR #34)

This is a GSSoC'26 contribution opportunity!

[Achiever199]

hi @MRIARC-08 , i am a gssoc contibutor please assign this issue to me

[NaisargPurohit]

Hi Maintainer I am a student at BMSCE participating in the COMMIT-ed Open Source Sprint. I would love to work on this issue and contribute to the project! I have experience with this tech stack and have already set up the project locally.
Could you please assign this to me? Thanks!