Mobile Platform as a Service:Como usar o MPH5OpenFileChooserProvider

Cenários

Se o comportamento padrão de seleção de arquivos da tag <input type="file"/> em um pacote offline HTML5 não atender às suas necessidades, use o MPH5OpenFileChooserProvider para assumir o controle da seleção de imagens. Esse recurso permite personalizar a interface de seleção, oferecer suporte a múltiplas escolhas e gerenciar permissões dinâmicas.

Implementação

1. Registre o MPH5OpenFileChooserProvider no callback após a conclusão da inicialização do mPaaS.

   Passe uma instância de MPH5OpenFileChooserProvider para H5Utils.setProvider. A instância deve sobrescrever dois métodos:

   • needIntercept: Determina se a implementação personalizada assume o controle. Retorne true para interceptar o contêiner HTML5 e aplicar sua lógica personalizada; retorne false para manter o comportamento padrão.

   • openFileChooser: Contém a lógica personalizada de seleção de imagens. Este método é executado apenas quando needIntercept retorna true.

     H5Utils.setProvider(MPH5OpenFileChooserProvider.class.getName(), 
                         new MPH5OpenFileChooserProvider() {
                             @Override
                             public boolean needIntercept(Activity activity, ValueCallback valueCallback, boolean b, APFileChooserParams apFileChooserParams) {
                                 // If the custom image selection feature is not needed, return false to avoid intercepting the HTML5 container. By default, the container is not intercepted.
                                 // To use the custom image selection feature, intercept the HTML5 container and return true.
                                 return true;
                             }
     
                             @Override
                             public void openFileChooser(Activity activity, ValueCallback valueCallback, boolean b, APFileChooserParams apFileChooserParams) {
                                 // Get a valid URI and pass it to the frontend.
                                 // This method must be called. Otherwise, the next click callback will not be executed.
                                 // 1. Use an intent to open an Activity that calls the system album or camera.
                                 // 2. Get the selected image.
                                 // 3. Close the page and pass the image to the frontend through valueCallback.
                                 valueCallback.onReceiveValue(xx);
                             }
                         });

     Importante

     Sempre chame valueCallback.onReceiveValue(xx) antes de fechar a Activity, mesmo que o usuário cancele a operação. Se essa chamada for omitida, o contêiner HTML5 suprimirá eventos de clique subsequentes no mesmo elemento <input>.

2. Implemente a lógica de seleção de imagens dentro do callback openFileChooser:

   1. Use um Intent para iniciar uma Activity personalizada que abra a galeria de fotos ou a câmera do sistema.

   2. Obtenha a imagem selecionada a partir do resultado.

   3. Envie a URI da imagem para o frontend por meio do valueCallback e feche a Activity.

Soluções de referência

Ambas as soluções implementam o mesmo fluxo de três etapas: iniciar uma Activity de seleção → obter o resultado → chamar valueCallback.onReceiveValue(xx) para devolver os dados. A diferença reside na forma como o resultado trafega da Activity de seleção até o callback openFileChooser.

Solução 1

Use um broadcast para desacoplar a Activity de seleção do callback openFileChooser.

1. No callback openFileChooser, registre um receptor de broadcast para aguardar o resultado da seleção.

2. No método openFileChooser, use um Intent para acessar uma Activity personalizada destinada à seleção de imagens.

3. Chame o SDK da câmera ou da galeria de fotos do sistema. Adicione extensões opcionais, como recorte de imagem, conforme necessário.

4. Após a seleção, envie um broadcast da Activity de seleção para o receptor registrado e feche a Activity. O broadcast transporta o resultado de volta ao contexto do callback openFileChooser.

5. No receptor de broadcast, chame valueCallback.onReceiveValue(xx) na WebView para retornar o arquivo selecionado ao frontend.

Solução 2

Passe o valueCallback diretamente para a Activity de seleção e chame-o nesse local.

1. No método openFileChooser, use um Intent para acessar uma Activity personalizada, passando o valueCallback para essa Activity como um extra.

2. Chame o SDK da câmera ou da galeria de fotos do sistema. Adicione extensões opcionais, como recorte de imagem, conforme necessário.

3. Chame valueCallback.onReceiveValue(xx) na WebView para retornar o arquivo selecionado ao frontend.

4. Feche a Activity.