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 outra pastas do seu projeto ou para 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

O componente é automaticamente criado 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).

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 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 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

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 - 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 7). 

Figura 6 - Referenciando a view no bloco

Siga os passos abaixo para montar a função do bloco de programação:

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

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.

Figura 9 - 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 10).

Figura 10 - Arquivo utilizado em nosso teste