IOS Safari File Picker Fixed #1736
Conversation
- Removed unnecessary import of `html/parser.dart`. - Removed the `_ensureInitialized` function and the related `_kFilePickerInputsDomId`. - Removed the private variable `_target`. - Refactored code to remove parsing of HTML string into document object. - Added a check for null in `_addFileToResult` - added a null check if the file attribute is not null. - Added a null check for the files attribute in the `pickFiles` function. - improved conditional statement for checking isSafariIos
…r multiple files.
The confirmation modal's styles have been updated to more closely match the style of iOS dialogs. This includes changes to the modal's positioning, background color, borders, shadows, and overall width. The content container, title, detail text, and button container have all been adjusted to improve visual consistency and alignment. Button styles for the "Cancel" and "Allow" actions have also been refined. Added "Don't Allow" and "Allow" text to the buttons.
|
This feels more like a workaround, rather than an actual fix? Instead of using a fake dialog, I would look into using a more long term solution. |
|
Maybe a long term solution is just to have the input element invisible? (instead of The input element is doing that here: https://github.com/miguelpruivo/flutter_file_picker/blob/master/lib/_internal/file_picker_web.dart#L67 See https://stackoverflow.com/questions/26501221/calling-click-event-of-input-doesnt-work-in-safari |
|
I think we can calculate the element position where file picker is placed and then overlay the input element there. |
2 participants
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
.click()triggers for file inputs are prevented for security reasons.Approach
<input type="file">withopacity: 0on top of the "Allow" button.Implementation Details
position: absolute; opacity: 0;).Testing
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.