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:
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)
<div style="display: none;"> </div> (linhas #46 e #55)
<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>
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");
}
}
Testando tudo
*Nota: Os demais controles que escondemos, estão lá, mas não são visíveis ao usuário.
Para receber os artigos do Blog Magic Brasil em primeira mão no seu email, registre-se aqui