feat(macos): Support File Input On Macos (react-native-webview#2733)

OneKeyHQ · Dec 9, 2022 · 9b7ce57 · 9b7ce57
1 parent ffaef12
commit 9b7ce57
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/apple/RNCWebView.m b/apple/RNCWebView.m
@@ -318,6 +318,23 @@ - (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWe
   return nil;
 }
 
+/**
+ * Enables file input on macos, see https://developer.apple.com/documentation/webkit/wkuidelegate/1641952-webview
+ */
+#if TARGET_OS_OSX
+- (void)webView:(WKWebView *)webView runOpenPanelWithParameters:(WKOpenPanelParameters *)parameters initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSArray<NSURL *> *URLs))completionHandler
+{
+  NSOpenPanel *openPanel = [NSOpenPanel openPanel];
+  openPanel.allowsMultipleSelection = parameters.allowsMultipleSelection;
+  [openPanel beginSheetModalForWindow:webView.window completionHandler:^(NSInteger result) {
+    if (result == NSModalResponseOK)
+      completionHandler(openPanel.URLs);
+    else
+      completionHandler(nil);
+  }];
+}
+#endif //Target_OS_OSX
+
 - (WKWebViewConfiguration *)setUpWkWebViewConfig
 {
   WKWebViewConfiguration *wkWebViewConfig = [WKWebViewConfiguration new];

diff --git a/docs/Guide.md b/docs/Guide.md
@@ -217,6 +217,14 @@ WebView.isFileUploadSupported().then(res => {
 
 ```
 
+##### MacOS
+
+Add read access for `User Selected File` in `Signing & Capabilities` tab under `App Sandbox`:
+
+<img width="856" alt="settings screenshot" src="https://user-images.githubusercontent.com/36531255/200541359-dde130d0-169e-4b58-8b2f-205442d76fdd.png">
+
+Note: Attempting to open a file input without this permission will crash the webview.
+
 ### Multiple Files Upload
 
 You can control **single** or **multiple** file selection by specifing the [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple) attribute on your `input` element:

diff --git a/example/App.tsx b/example/App.tsx
@@ -170,7 +170,7 @@ export default class App extends Component<Props, State> {
             title="Downloads"
             onPress={() => this._changeTest('Downloads')}
           />
-          {Platform.OS === 'android' && (
+          {(Platform.OS === 'android' || Platform.OS === 'macos') && (
             <Button
               testID="testType_uploads"
               title="Uploads"