Angular14升15后Android WebView文件选择器触发用户激活报错求助

问题 #

代码在桌面Chrome浏览器运行正常，但在Android WebView（Chrome内核）中报错：File chooser dialog can only be shown with a user activation. Debugging click error。该功能在Angular 14版本中可正常工作，升级到Angular 15（当前@angular/material版本为^15.2.9）后出现此问题。

相关代码 #

HTML模板代码

<input
    id="hiddenInputAcquire"
    class="hidden-input-acquire"
    hidden
    type="file"
    accept="image/*"
    capture="environment"
    onclick="this.value = null"
    (change)="onUploadPicture($event)" />

<button
        mat-icon-button
        color="accent"
        matTooltip="{{ 'COMMON.PICTURE_TOOLTIP_ACQUIRE' | translate }}"
        (click)="acquireImage()">
        <mat-icon>photo_camera</mat-icon>
      </button>

TypeScript逻辑代码

acquireImage() {
    if (this.isCaptureSupported()) {
      const inputAcquire = document.getElementById('hiddenInputAcquire') as HTMLInputElement;
      if (inputAcquire) {
        // 错误发生在此处
        inputAcquire.click();
      }
      return;
    }

    const dialogRef = this.dialog.open(AcquireImageDialogComponent);
    dialogRef.componentInstance.useToCropExistingImage = undefined;
    dialogRef.componentInstance.interactiveCropping = this.useCropper;
    this.acquireDialogSub?.unsubscribe();
    this.acquireDialogSub = dialogRef.afterClosed().subscribe((res: AcquireImageDialogResult) => {
      if (res.isImageProvided) {
        this.assignPicture(res.fileId);
      }
    });
  }

private isCaptureSupported() {
    const ele = document.createElement('input');

    return 'capture' in ele;
  }

async onUploadPicture(event: Event) {
    const pictureFiles = (event.target as HTMLInputElement).files;

    if (pictureFiles) {
      const filesData = Array.from(pictureFiles);
      if (filesData.length === 1) {
        if (this.useCropper) {
          const dialogRef = this.dialog.open(AcquireImageDialogComponent);
          dialogRef.componentInstance.useToCropExistingImage = filesData[0];
          dialogRef.afterClosed().subscribe((res: AcquireImageDialogResult) => {
            if (res.isImageProvided) {
              this.assignPicture(res.fileId);
            }
          });
        } else {
          await this.fileUploadService.upload(filesData, ObjectVisibility.OV_DEFAULT).then((result) => {
            if (result.length === 1) {
              this.assignPicture(result[0]);
            }
          });
        }
      }
    }
  }

已尝试的方法 #

使用this.hiddenInputAcquire.nativeElement.click();方式触发input的点击事件，问题仍未解决。

解决方案 #

1. 确保用户激活上下文不丢失 #

浏览器（WebView）要求文件选择对话框必须由用户直接触发的交互打开，不能脱离用户激活上下文。Angular 15的事件处理调度可能导致原本同步的函数调用丢失激活状态，可尝试：

• 将acquireImage中的核心触发逻辑直接内联到按钮的(click)事件中，减少函数调用层级：

  <button
    mat-icon-button
    color="accent"
    matTooltip="{{ 'COMMON.PICTURE_TOOLTIP_ACQUIRE' | translate }}"
    (click)="isCaptureSupported() && hiddenInputAcquire.click()">
    <mat-icon>photo_camera</mat-icon>
  </button>
  

  同时将input改为模板引用变量：

  <input
    #hiddenInputAcquire
    class="hidden-input-acquire"
    style="position: absolute; left: -9999px;"
    type="file"
    accept="image/*"
    capture="environment"
    onclick="this.value = null"
    (change)="onUploadPicture($event)" />
  

2. 使用Angular Renderer2触发点击 #

直接操作DOM可能导致上下文丢失，改用Angular官方推荐的Renderer2来触发点击，更符合框架规范：

import { Renderer2, ElementRef, ViewChild } from '@angular/core';

@Component({/* 组件配置 */})
export class YourComponent {
  @ViewChild('hiddenInputAcquire') hiddenInputAcquire!: ElementRef<HTMLInputElement>;

  constructor(private renderer: Renderer2) {}

  acquireImage() {
    if (this.isCaptureSupported()) {
      // 使用Renderer2触发点击
      this.renderer.click(this.hiddenInputAcquire.nativeElement);
      return;
    }
    // 原有弹窗逻辑...
  }
}

3. 调整input元素的隐藏方式 #

避免使用hidden属性，改用CSS绝对定位隐藏，部分浏览器对hidden元素的交互有安全限制：

.hidden-input-acquire {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  pointer-events: none;
}

同时移除input标签上的hidden属性。

4. 检查Android WebView原生配置 #

确保WebView允许文件访问，在Android原生代码中添加以下配置：

webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setAllowContentAccess(true);

内容的提问来源于stack exchange，提问作者volki tolki