Função

O componente envio de arquivo é utilizado para fazer o upload de qualquer tipo de arquivo. Após utilizar o componente, o arquivo é enviado para um diretório temporário da aplicação, podendo ser movido para outras pastas do seu projeto ou para fora da aplicação.

Image RemovedImage Added

Figura 1 - Exemplo do componente rodando no Browser

Principais propriedades

Na tabela abaixo estão descritas as principais propriedades do componente.

Aba de Estilos

Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Envio de Arquivo Dinâmico.

Adicionar via gerador de CRUD

O componente é automaticamente adicionado no formulário ao utilizar o gerador de CRUD no Diagrama com os atributos do Arquivo no Banco ou Arquivo no Cloud. O tipo Cloud permite que o arquivo seja configurado e enviado automaticamente para a sua conta no Serviço de Cloud do Cronapp, Amazon S3 ou Dropbox (acesse a documentação para mais detalhes).

Quando definimos um atributo para o tipo Arquivo no Banco, o seu conteúdo é salvo em um array de byte. Assim, para identificar o nome e extensão do arquivo, podemos criar um novo atributo texto que receberá essas informações do componente.

Figura 2 - Atributos do tipo Arquivo no Banco e Texto

Após configurar seus atributos na entidade, clique com o botão direito do mouse sobre a entidade e selecione a opção Criar camada de dados para a entidade e depois Criar visão mobile para a entidade (Figura 2.2) selecionando todos os atributos.

Figura 2.1 - Criando visão para a entidade

Em seguida, acesse a view criada pelo CRUD (passo anterior), selecione o componente Envio de Arquivo Dinâmico (1 da figura 2.2) e clique em Editar expressão (2) na propriedade Informações do Arquivo para abrir sua janela. Clique na aba Campos da Tela e selecione o atributo de texto da fonte de dados, nesse exemplo: "infoArquivo1" (3).

Figura 2.2 - Selecionando o campo de informações do arquivo da fonte de dados

Agora rode o projeto, acesse a página da sua entidade e clique no botão adicionar para visualizar o componente arquivo gerado pelo CRUD no Cronapp (Figura 2.3).

Image RemovedImage Added

Figura 2.3 - Componentes Arquivo gerados pelo CRUD

Adicionar manualmente

Como alternativa ao uso desse componente em CRUDs, os passos abaixo mostram um outro exemplo de como utilizar esse componente.

Para facilitar o uso do componente, é interessante entender o que o componente faz por "detrás dos panos".

Após obter o arquivo, o componente irá direcioná-lo para um diretório temporário. Os arquivos adicionados nesse diretório serão excluídos automaticamente após 10min. Por isso, após realizar o upload do arquivo, é necessário que o sistema envie esse arquivo para o seu destino.

O diretório temporário é oculto e fica em "/project/target/tomcat/temp/CRONAPI_RECYCLE_FILES", para acessar esse endereço podemos usar o bloco de programação Pasta reciclável da aplicação, como mostraremos mais abaixo.

Para evitar conflito de arquivos com nomes iguais no diretório temporário, o componente Envio de arquivo dinâmico renomeia o arquivo e sua extensão, ficando: <hash>.bin. Apesar do arquivo estar com a extensão .bin, não se trata de um arquivo binário, o arquivo original está apenas renomeado. 

Para saber o nome do arquivo original é criado um segundo arquivo com mesmo hash e extensão .md. Seu conteúdo é um JSON que informa o nome, extensão e tipo do arquivo original.

Por exemplo, o usuário envia um arquivo de imagem chamado "minha-foto.png", no diretório temporário serão criados 2 arquivos:

1. 5874aa6e826a4bbf8828cca7407ca8bb.bin: arquivo imagem enviado pelo usuário, porém renomeado;

2. 5874aa6e826a4bbf8828cca7407ca8bb.md: arquivo com informações sobre o nome original do arquivo.
   

   Bloco de código
   language js firstline 1 title Conteúdo do arquivo .md linenumbers true
   { "name":"minha-foto", "fileExtension":".png", "contentType":"image/png" }

Por fim, precisamos saber como identificar qual arquivo (renomeado) foi enviado pelo o usuário atualmente logado. Para isso, podemos obter o valor do componente usado, ao fazer isso, o componente irá retornar um JSON parecido com o conteúdo do arquivo .md, com mais 2 atributos: type, que informa se tratar de um arquivo temporário e path, nome do arquivo renomeado.

{ "type": "tempFile", "path": "5874aa6e826a4bbf8828cca7407ca8bb.bin", "name": "minha-foto", "fileExtension": ".png", "contentType": "image/png" }

Passos do exemplo

Mostraremos como obter o arquivo enviado pelo usuário, transferir o conteúdo para o diretório raiz do seu projeto e renomear para o nome original. 

Editor de view

No editor de formulários mobile, arraste o componente Envio de arquivo dinâmico e em seguida um botão, esse botão será responsável por chamar a função que irá obter informações, mover e renomear o arquivo (Figura 3).

Image RemovedImage Added

Figura 3 - Componentes Envio de arquivo dinâmico e botão

Bloco de programação

Crie um bloco de programação (servidor) e nas propriedades do Bloco, informe no campo Formulário de Referência a página usada no passo anterior (Figura 3.1). 

Figura 3.1 - Referenciando a view no bloco

Siga os passos abaixo para montar a função do bloco de programação ou baixe e em seguida faça um upload do arquivo Salvar.blockly na pasta Servidor (localização: Blocos de Programação/Servidor 

) do seu projeto.

Arquivo 1 - Arquivo blockly com a função MoverRenomear

Figura 3.3 - Primeira parte do bloco de programação

1. Defina uma variável com nome dadosArquivo e obtenha o valor selecionando o campo do Envio de Arquivo Dinâmico, no nosso exemplo renomeamos o valor do campo para arquivoDinamico;

2. Crie a variável "info", encaixe o bloco Para Json e em seguida a variável "dadosArquivo.

   • Precisamos converter o conteúdo obtido do componente para JSON, facilitando a leitura dos atributos.

Figura 3.4 - Segunda parte do bloco de programação   

1. Defina uma variável com nome transfere que receberá true ou false do bloco Mover arquivo.

2. Encaixe o bloco Mover arquivo e no parâmetro "Caminho de destino", adicione o bloco Pasta da aplicação.

3. No parâmetro "Caminho de origem" do bloco Mover arquivo, encaixe bloco Criar texto com e adicione mais um campo de concatenação.

   • No primeiro parâmetro do bloco "Criar texto com", adicione o bloco Pasta reciclável da aplicação.

   • No segundo parâmetro do bloco "Criar texto com", insira o bloco Separador de arquivos.

4. No terceiro parâmetro do bloco "Criar texto com", arraste o bloco Obter campo do Json.

   • Arraste a variável que convertemos em JSON no primeiro parâmetro (Json).

   • Informe "path" no parâmetro "Caminho a percorrer".

Figura 3.5 - Última parte do bloco de programação

1. Adicione o bloco lógico "Se" e encaixe a variável transfere. Esse passo só será executado se não houver erro durante a transferência do arquivo.

2. Defina uma variável com o nome "Renomeia", ela receberá true ou false do bloco Renomear arquivo.

3. Encaixe o bloco Renomear arquivo.

4. Insira o bloco Criar texto com no parâmetro "Caminho do arquivo" do bloco Renomear arquivo e adicione mais um campo de concatenação.

   Adicione os seguintes blocos nos seus parâmetros:

   • Pasta da aplicação;

   • Separador de arquivos;

   • Obter campo do Json, informando novamente a variável "info" e o termo "path".

5. Insira o bloco Criar texto com no parâmetro "Novo nome" do bloco Renomear arquivo.

   Nos 2 parâmetros do bloco último bloco "Criar texto com", adicione blocos Obter campo do Json e encaixe a variável "info" no parâmetro "Json" de ambos os blocos.

   • No parâmetro Caminho a percorrer do primeiro bloco informe "name", já no mesmo parâmetro do segundo bloco, informe "fileExtension". 

Ação do botão

Volte a área de edição da página em que inserimos o componente, selecione o botão e no evento Ao clicar, selecione o bloco que criamos no passo acima.

Figura 3.6 - Última parte

Teste

Salve tudo, execute o seu projeto e acesse a view criada (no exemplo acima upload). Clique sobre o componente para fazer upload de um arquivo do seu computador, como na figura 3.7. Nesse momento o arquivo já está na pasta temporária da aplicação e teve seu nome renomeado para <hash>.bin, como informado acima.

Image RemovedImage Added

Figura 3.7 - Exibição de dados do arquivo após upload feito

Volte ao Cronapp, clique com o botão direito em cima do nome do projeto e selecione Recarregar. Após isso, você já conseguirá ver seu arquivo na pasta da aplicação (Figura 3.8).

Image RemovedImage Added

Figura 3.8 - Arquivo utilizado em nosso teste