Função

O componente envio de arquivo é utilizado para fazer o upload de qualquer tipo de arquivo, com possibilidade de restringir por tipos específicos. Após utilizar o componente, o arquivo é enviado para um diretório temporário da aplicação, podendo ser movido para outra pastas do seu projeto ou até mesmo em locais externospara fora da aplicação.

Figura 1 - Exemplo do componente rodando no Browser

Principais propriedades

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

Adicionar via gerador de CRUD

Para utilizar o componente de arquivo no Cronapp você poderá gerá-lo através do O componente é automaticamente criado ao utilizar o gerador de CRUD no Diagrama , utilizando com os atributos do Tipo do Arquivo no Banco ou Arquivo no Cloud. O tipo Cloud permite que o arquivo seja configurado e enviado automaticamente para a sua contra conta no Serviço de Cloud do Cronapp, Amazon S3 ou Dropbox , (acesse a documentação para mais detalhes).

Figura 2 - Atributos Arquivo no Banco e Arquivo no Cloud

Após configurar seus atributos na entidade, clique com o botão direito do mouse sobre a entidade e selecione a opção Criar visão para a entidade (Figura 3).

Figura 3 - Criando visão para a entidade

Em seguida 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 4).

Figura 4 - Componentes Arquivo gerados pelo CRUD.

Adicionar manualmente

Como alternativa ao uso desse componente em CRUDs, os passos abaixo mostra 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 final.

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 o mesmo hash e extensão .md. Seu conteúdo é um JSON que informa o nome, extensão e tipo de 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 retornar 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

Nesse passos mostraremos 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 views web, 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 5).

Figura 5 - Arrastando componentes para view

Upload do arquivo

• Rode seu projeto;
• Acesse a view criada (no exemplo acima upload);
• Clique sobre o componente para fazer upload de um arquivo do seu computador.

Image Removed

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

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, use o informe no campo Formulário de Referência e selecione a página que criamos acima  a página usada no passo anterior (Figura 7). 

Figura 7 6 - Referenciando a view no bloco

Para desenvolver a lógica Siga os passos abaixo para montar a função do bloco de programação mover siga os passos abaixo:

Image Modified

Figura 8 - Função mover7 - 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;
Defina uma variável com nome info quer irá receber informações em formato JSON da variável dadosArquivo;
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.

Image Added

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

1. Defina uma variável com nome "trasfere" que receberá true ou false do bloco Mover arquivo.
2. Encaixe transfere quer irá receber um retorno verdadeiro ou falso:Adicione 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 Adicione o bloco criar texto com Pasta reciclável da aplicação / campo path do JSON da variável info a ser levado para Pasta da aplicação.
4. No Caminho de destino adicione o bloco Pasta da aplicação onde será persistido o nosso arquivo.
5. Adicione o bloco condicional se faça para validar se o valor da variável transfere é verdadeiro significando assim que a transferência foi feita com sucesso.
6. Após a transferência ser concluída iremos executar a renomeação do arquivo para o nome original dele dentro do faça, pois para evitar duplicidade no upload o Cronapp definiu seu nome como uma série de números + .bin
7. Defina uma variável com nome renomeia;
8. Adicione o bloque Renomear arquivo
   
   1. Caminho do arquivo iremos passar o caminho onde ele se encontra
      1. Pasta da aplicação / campo path do JSON da variável info
   2. Novo nome criaremos com o campo name e com o campo fileExtension que se encontra no JSON da variável info

Para que seu bloco seja executado você deverá vincular ao botão Salvar Arquivo criado na view Upload (Figura 9).

Image Removed

Figura 9 - Selecionando view ao bloco

Teste

1. " 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.
2. 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".

Image Added

Figura 8 - Ú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.

Image Added

Figura 8 - Ú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 9. 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 Added

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

Volte ao Cronapp, Por fim rode o projeto, acesse a view, faça o upload de um arquivo e clique no botão Salvar Arquivo. Acesse a IDE clique com o botão direito em cima do nome do projeto e selecione Recarregar após . Após isso, você já conseguirá ver seus arquivos seu arquivo na pasta da aplicação (Figura 10).

Image Modified

Figura 10 - Arquivo utilizado em nosso teste