Duplicate hidden file inputs in FileUpload component cause ref confusion and redundant DOM

[satyamtiwari-1499]

Description

The FileUpload component renders multiple hidden <input type="file"> elements and attaches the same inputRef to more than one input instance.

This can cause the ref to point only to the last rendered input, making keyboard shortcuts or programmatic .click() calls unreliable. It also leaves redundant hidden file inputs in the DOM.

Actual Behavior

• inputRef is attached to multiple hidden file inputs inside FileInfo and DropZone
• Duplicate hidden file inputs exist in the same render branch
• Actions like inputRef.current?.click() may target an unexpected input
• File picker behavior can become inconsistent

Expected Behavior

• Only one hidden file input should exist per FileUpload instance
• inputRef should be attached only once
• All triggers (Change button, Ctrl + O, drop zone click) should consistently open the same file picker

Steps to Reproduce

1. Open the app
2. Upload a file so the FileInfo view renders
3. Inspect the DOM and observe multiple hidden input[type="file"] elements
4. Try using the Change button or Ctrl + O
5. Observe inconsistent file picker behavior

Impact

• Potential UX inconsistencies
• Ref behavior becomes unreliable
• Adds unnecessary DOM duplication
• Makes maintenance and testing harder

Suggested Fix

• Consolidate to a single hidden file input inside the FileUpload component
• Attach inputRef only once
• Ensure all triggers use the same input element
• Remove duplicated hidden inputs and duplicate onChange handlers

[github-actions]

👋 Thanks for opening an issue, @satyamtiwari-1499!

Our maintainers will review this shortly 🚀

Before you start working

• 📖 Read the CONTRIBUTING.md guide
• 💬 Wait for a maintainer to assign you the issue before starting work
• 🔍 Search for existing issues to avoid duplicates

For GSSoC'26 contributors

If you're contributing under GirlScript Summer of Code 2026, please mention it in your comment when requesting assignment:

"I'd like to work on this — contributing under GSSoC'26"

Architecture notes

Reframe is a static Next.js app with output: "export". Key points:

• All video processing uses FFmpeg.wasm (client-side, no server)
• headers() in next.config.ts won't work — use vercel.json instead
• not-found.tsx requires public/404.html + vercel.json routes config

Happy contributing! ⭐ Star the repo if you find it useful!

[satyamtiwari-1499]

/assign gssoc

[github-actions]

Hey @satyamtiwari-1499, this issue has been assigned to you! 🎉 Please make progress within 5 days or it will be automatically unassigned due to inactivity.