Função

O componente envio de arquivo é utilizado para fazer o upload de arquivos de tipos variados (.txt, .png, .jpg, .pdf, etc.), podendo ser adicionado dentro de pastas no 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 externos.

Figura 1 - Exemplo do componente rodando no Browser

Principais propriedades

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

Utilizar pelo CRUD

Para utilizar o componente de arquivo no Cronapp você poderá gerá-lo através do gerador de CRUD no Diagrama com , utilizando os atributos do Tipo Arquivo no Banco ou Arquivo no Cloud (para saber como configurar atributos no Cloud acesse a documentaçãoCloud. O tipo Cloud permite que o arquivo seja configurado e enviado automaticamente para a sua contra 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.

Utilizando de forma independente

Como alternativa ao uso via Diagrama siga desse componente em CRUDs, os passos abaixo para utilizar o componente envio de arquivo dinâmico no seu projeto:

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

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

Image Modified

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.

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

Após realizar o upload do arquivo o Cronapp irá colocá-lo temporariamente no diretório:

Persistindo Arquivo

Para que você persista seu arquivo em uma pasta do seu projeto será necessário a criação de Crie um bloco de programação do tipo servidor

(servidor) e nas propriedades do Bloco, use o campo Formulário de Referência e selecione a página que criamos acima (Figura 7). 

Image Modified

Figura 7 - Selecionando Referenciando a view ao no bloco

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

Figura 8 - Função mover

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. Defina uma variável com nome info quer irá receber informações em formato JSON da variável dadosArquivo;
3. Defina uma variável com nome transfere quer irá receber um retorno verdadeiro ou falso:
   1. Adicione o bloco Mover arquivo:
      1. No 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.
      2. No Caminho de destino adicione o bloco Pasta da aplicação onde será persistido o nosso arquivo.
4. 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.
5. 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
6. Defina uma variável com nome renomeia;
7. 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).

Figura 9 - Selecionando view ao bloco

Teste

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 isso você já conseguirá ver seus arquivos na pasta da aplicação (Figura 10).