macOS下使用runOpenPanelWithParameters无法在WKWebView指定文件类型

要实现和Chrome一致的文件类型过滤（灰显非允许文件），并确保文件能正确上传到网站，核心是利用WKOpenPanelParameters传递的网站指定规则配置NSOpenPanel的过滤逻辑，WKWebView会自动处理选中文件的后续上传流程。

修改后的实现代码 #

- (void)webView:(WKWebView *)webView runOpenPanelWithParameters:(WKOpenPanelParameters *)parameters initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSArray<NSURL *> * _Nullable))completionHandler {
    NSOpenPanel *openPanel = [NSOpenPanel openPanel];
    openPanel.canChooseFiles = YES;
    openPanel.canChooseDirectories = NO;
    openPanel.allowsMultipleSelection = parameters.allowsMultipleSelection;

    // 根据网站指定的允许类型配置文件过滤
    if (parameters.allowedFileTypes.count > 0) {
        NSMutableArray<NSString *> *validFileTypes = [NSMutableArray array];
        for (NSString *type in parameters.allowedFileTypes) {
            if ([type containsString:@"/"]) {
                // 处理MIME类型，转换为系统识别的UTI
                CFStringRef uti = UTTypeCreatePreferredIdentifierForTag(kUTTagClassMIMEType, (__bridge CFStringRef)type, NULL);
                if (uti) {
                    [validFileTypes addObject:(__bridge NSString *)uti];
                    CFRelease(uti);
                }
            } else {
                // 直接添加文件扩展名
                [validFileTypes addObject:type];
            }
        }
        openPanel.allowedFileTypes = validFileTypes;
    }

    [openPanel beginWithCompletionHandler:^(NSModalResponse result) {
        if (result == NSModalResponseOK) {
            completionHandler(openPanel.URLs);
        } else {
            completionHandler(nil);
        }
    }];
}

关键逻辑说明 #

• 获取网站指定的允许类型：parameters.allowedFileTypes数组包含页面<input type="file">标签中accept属性指定的类型，可能是MIME类型（如image/png）或文件扩展名（如.png）。
• 类型转换与过滤配置：将MIME类型转换为系统统一类型标识符（UTI），确保NSOpenPanel能正确识别并过滤文件，配置后非允许类型文件会自动灰显。
• 自动处理文件上传：调用completionHandler(openPanel.URLs)后，WKWebView会像原生浏览器一样，自动将选中文件提交给页面的表单，无需手动处理文件数据的上传流程。

内容的提问来源于stack exchange，提问作者Geetanshu Gulati