Magic xpa WebClient: Transferindo Arquivos para o Servidor

Veja nesta publicação como enviar arquivos da estação (ou dispositivo móvel) do usuário para o servidor Magic xpa Web

Se você já vem acompanhando nossas outras publicações sobre o Magic xpa Web e o framework Angular:

 

Web Client no Magic xpa

 

então você já está conhecendo o runtime Angular do Magic xpa Web 4.6 (ou >) para a criação de aplicações WEB (HTML5, CSS3, TypeScript, JS, Angular …).

Se ainda não, corre lá, antes de prosseguir aqui.

 

Aqui, vamos mostrar como fazer um programa para uma tarefa rotineira em aplicações desta natureza (web), que é transferir arquivos do dispositivo local para serem recebidos e processados pelo servidor.

Este projeto exemplo está construído com o Magic xpa 4.7.2 e o Angular 10.

Veja aqui o que é necessário de pré-requisito para executar um projeto Web Client.

 

Iniciamos criando um programa Web Client no Magic xpa, com duas variáveis:

BLOB – para receber o conteúdo do arquivo transferido

ALPHA – para receber o nome do arquivo transferido

 

Após, criamos também um Evento de Usuário:

 

E desenhamos um esqueleto (template) de tela para este programa, com as duas variáveis associadas a Edit Controls e um Button que dispara este evento de usuário quando clicado:

 

Atenção aqui para os nomes destes 3 principais controles: vNewFileContents, vNewFileName e btnSendFile

*Nota: os outros dois controles, "Label" e "Button" são só auxiliares (decorativos) neste caso.

 

Com base nestas definições iniciais, solicitamos ao Magic xpa Studio a geração do projeto Angular, que é o conjunto de códigos HTML5, CSS3, TypeScript e etc… que quando compilados serão convertidos em JavaScript para executar diretamente no Web Browser do usuário (qualquer que seja seu dispositivo):

 

*Nota: Sim, esta é uma tarefa que leva bastante tempo, pois vários pacotes são baixados da internet neste momento.

 

Agora, começa a parte legal.

Vamos fazer “ajustes” no projeto Angular que foi gerado.

Abrimos o projeto com o VSCode e vamos inicialmente ao arquivo HTML, que é a página do nosso programa gerada a partir daquele template de tela desenhado no Magic xpa Studio.

 

Primeiramente: nós queremos “esconder” os dois Edit Controls das variáveis, mas sem removê-los. Só queremos que não apareçam.

E isso é fácil, basta envolvê-los em uma:

<div style="display: none;"> </div> (linhas #18 e #42)
Segundo passo: Aquele primeiro Button da tela, cujo texto de exibição é “HideMe“, nós também queremos escondê-lo. Novamente, basta envolvê-lo em uma:
<div style="display: none;"> </div> (linhas #46 e #55)
Terceiro passo: Agora, vamos adicionar (manualmente) um novo botão a esta página (HTML), mas que não é vinculado ao runtime Magic xpa.
Ele não possuirá a tag [Magic]. Assim, seja lá o que ele faça, o Magic xpa não terá ciência do que está ocorrendo.
Dentro deste botão usaremos um <Label> para formar o seu texto, e dentro deste Label, um <Input>.
Esta é uma parte chave da solução, veja:
<button mat-raised-button color="primary" >
<label>Enviar arqivo...
<input type="file" style="display: none" id="fileDialog" file-handler (change)='sendFileToMagic($event)' #ref_new>  (linha #63)
</label>
</button>
Este tipo de Input (“file“), com a decoração “file-handler“, indica ao WebBrowser através das bibliotecas Angular que este campo deve funcionar como um seletor de arquivos da máquina local (do usuário). O styledisplay: none” diz que este campo deve estar oculto (invisível) na página e o Event Handler (change) diz que uma rotina chamada “sendFileToMagic” deve ser ativada assim que o usuário fizer a seleção de algum arquivo:
Quarto passo: Outro ponto chave da estratégia. Partindo agora para o arquivo TS (TypeScript) do nosso programa, vamos “escrever” esta rotina mencionada acima: sendFileToMagic:
    fileText: string | ArrayBuffer;
    sendFileToMagic(event) {
        const reader = new FileReader(); 
        let size = event.srcElement.files[0].size/1024/1024;
        if( size <= 5.1 ) {
            reader.readAsDataURL(event.srcElement.files[0]);
            const i = event.srcElement.files[0].type.length;
            const num = 5 + i + 8;
            const me = this;       
            reader.onload = function() {
                me.fileText = reader.result;
                me.mg.setValueToControl('vNewFileContents', me.fileText.slice(num));
                me.mg.setValueToControl('vNewFileName', event.srcElement.files[0].name);
                document.getElementById('btnSendFile').click();
            }
        } else {
            alert("Tamanho máximo permitido: 5MB. Tamanho do arquivo selecionado: " + size + "MB");
        }    
    }
dentro do export class NovoArquivo extends TaskBaseMagicComponent:
Esta rotina, que é automaticamente ativada quando o usuário seleciona um arquivo no seu WebBrowser (o que ocorrerá quando ele clicar naquele botão que manualmente adicionamos mais acima), começa fazendo uma tarefa simples (só para colocar ordem na casa): ela verifica se o tamanho do arquivo é menor que o limite (que arbitramos aqui) de 5MB.
Se não for, já cai lá embaixo no “else” e alerta o usuário.
Se for, entra no “if” e faz o restante do trabalho.
Ela irá ler o arquivo local (reader.readAsDataURL), convertendo seu conteúdo para Base64, a assim que finalizado (reader.onload), ela localiza aqueles controles “escondidos” do Magic xpa:
O Edit de nome”vNewFileContents
O Edit de nome”vNewFileName
O Button de nome “btnSendFile
vNewFileContents” é atualizado com o conteúdo (como Base64) do arquivo lido, e isso atualiza automaticamente a variável (BLOB) do Magic xpa vinculada a este Edit.
vNewFileName” é atualizado com o nome do arquivo lido, e isso atualiza automaticamente a variável (ALPHA) do Magic xpa vinculada a este Edit.
btnSendFile” recebe um “clique” forçado, e isso avisa o Magic xpa que o evento vinculado a este Button (aquele que criamos no início, e escondemos) foi disparado e pode ser tratado.
Último passo: Para completar, vamos escrever o Event Handler dentro do Magic xpa para tratar do evento que pode ocorrer cfe. a sequência mostrada acima.
Lembrando que ambas as variáveis (BLOB e ALPHA) já estarão devidamente preenchidas:
Aqui neste exemplo, vamos apenas converter o Base64 em seu conteúdo original e salvá-lo em disco no lado (máquina) servidor, numa pasta qualquer, usando o nome original do arquivo enviado como parte do nome deste arquivo remoto (agora no servidor).

Testando tudo

Executando esta aplicação de exemplo, veremos:
Um Label (do Magic)
Um “Botão” (do Magic)
Outro “Botão” (que adicionamos manualmente e vinculamos a um Input-File)
*Nota: Os demais controles que escondemos, estão lá, mas não são visíveis ao usuário.
Quando o usuário clica neste botão, ele pode selecionar um arquivo qualquer da sua máquina:
e se ele confirma sua seleção, aquela rotina “sendFileToMagic” é executada, terminando por ativar e executar o Event Handler dentro do nosso programa o Magic xpa:
Baixe deste endereço o projeto exemplo que foi utilizado aqui, e divirta-se você também.
Manoel Frederico Silva – Gerente de Tecnologia e Evangelista MAGIC – Magic Brasil
Manoel Frederico Silva – Evangelista MAGIC – Magic Brasil

 

Para receber os artigos do Blog Magic Brasil em primeira mão no seu email, registre-se aqui

Deixe um comentário

O seu endereço de e-mail não será publicado.