Chamar um componente de Upload de Arquivos através de um botão

Suporte
1

Há alguma forma de configurar um botão para que ele chame as funcionalidades de um componente “Upload de Arquivo”?

Tenho intenção de utilizar um botão que abra diretamente a seleção de arquivos/câmera e já confirma os uploads quando o arquivo for inserido. Assim poderia fazer um upload utilizando todos os recursos de customização visual que o “Botão” proporciona.

2

Bom dia @evandro!

Sim, é possível disparar o evento de campo upload por um botão. Uma das possibilidades é adicionando a execução do seguinte código javascript no procedimento do botão:

document.querySelector(
    '#' + 
    latromi.formManager
               .getFormInstance()
               .getFieldData('NOME_DO_CAMPO_UPLOAD').clientId +
    ' .ruFileInput').click()

Obs.: Substitua o texto ‘NOME_DO_CAMPO_UPLOAD’ pelo nome do campo que deseja disparar o evento de click

3

Perfeito @Diego_Ramos ! Funcionou muito bem! Obrigado

1 curtida
4

@Diego_Ramos no Android e no Windows funcionou perfeitamente, porém quando acessamos com iPhone o clique no botão não executa. Temos que tratar diferente?

5

Poderia me confirmar se o botão está disparando o evento de click no Iphone, usando uma mensagem de alerta no procedimento por exemplo

6

Vamos ver se a seguinte alteração funciona, pelo que pesquisei referente ao IPhone. Parece ser um bloqueio de segurança para evitar a abertura do explorador de arquivo, no dispositivo, por ações que não tem origem no usuário.

$('#' + 
    latromi.formManager
               .getFormInstance()
               .getFieldData('NOME_DO_CAMPO_UPLOAD').clientId +
    ' .ruFileInput').trigger("click");

Para esse trecho de código estamos usando o disparo de evento com Jquery, pelo que consegui ver sobre ele, faz alguns tratamentos que efetua uma propagação de eventos e pode ajudar o IPhone a interpretar o disparo do click como um usuário.

Outra alternativa, seria identificar se o aparelho é IPhone e apresentar o campo de upload diretamente, para o usuário clicar.

Neste tópico, mostra como identificar o aparelho.

7

@Diego_Ramos a segunda abordagem também não funcionou no iphone.
Acabei utilizando javascript para capturar o tipo de dispositivo e criando ações diferentes no botão para quando o acessamos com iphone/ipad.

Obrigado pela ajuda!

2 curtidas