PR: Fix iOS Safari File Picker Issue with a Transparent Overlay

Summary

This PR resolves an iOS Safari limitation where a programmatic click (.click()) on an<input type="file"> is blocked. Instead of relying on a virtual click, this solution uses a custom dialog with a transparent, overlaid<input type="file"> element on the “Allow” button to ensure iOS recognizes it as a genuine user interaction.

Background

• Problem: On iOS Safari,.click() triggers for file inputs are prevented for security reasons.
• Impact: Users could not upload files on iOS devices if the file picker was triggered without direct user interaction.

Approach

1. Custom Dialog: Displays a modal asking the user to "Allow" file selection.
2. Transparent Overlay: Places an<input type="file"> withopacity: 0 on top of the "Allow" button.
   • When tapped, it counts as a legitimate user action, opening the file picker.

Implementation Details

• Created a dialog component containing the “Allow” button.
• Positioned a hidden file input over the button with CSS (position: absolute; opacity: 0;).
• On tap/click, the file picker opens because the user is directly interacting with the file input.

Testing

• iOS Safari: Confirmed that tapping the “Allow” button now successfully opens the file picker.
• Cross-Browser: Verified that other browsers still open the file picker correctly.
• Edge Cases: Tested multiple taps, cancellations, and reopens to ensure stability.

Screenshot

See the attached screenshot showing the dialog with the “Allow” button and the transparent file input overlay.

By merging this PR, we ensure a consistent, user-friendly file upload experience on iOS Safari, aligning with the direct interaction requirement.