Função

O componente envio de arquivo dinâmico é 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 outras pastas do seu projeto ou para fora da aplicação.

Figura 1 - Exemplo do componente rodando no Browser

Principais propriedades

Propriedades

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

Eventos

Na tabela abaixo estão descritos os eventos disponíveis para o componente.

Estilos

Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente.

Adicionar via gerador de CRUD

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

Image AddedImage Removed

Figura 2 - Atributos do tipo Arquivo no Banco e Arquivo no CloudTexto

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 para a entidade (Figura 3).

Image Removed

2.2) selecionando todos os atributos.

Image Added

Figura 2.1 Figura 3 - 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).

Image Added

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

Image RemovedImage Added

Figura 4 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 views Criamos a view Upload e, no formulário web, arraste o componente 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 53.1).

Image RemovedImage Added

Figura 5 3.1 - 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 73.2). 

Image RemovedImage Added

Figura 6 3.2 - 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:

Image Removed

Blocos de Programação/Servidor 

) do seu projeto.

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

Image Added

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

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

   ;

   ".

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

precisamos

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

Image RemovedImage Added

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

1. Defina uma variável com

nome 

2. nome "

trasfere

3. transfere" que receberá true ou false do bloco Mover arquivo.

4. Encaixe o bloco Mover arquivo

 e

5. e no parâmetro

"

6. Caminho de destino

"

7. , adicione o bloco Pasta da aplicação.

8. No parâmetro

"

9. Caminho de origem

" do

10.  do bloco Mover arquivo, encaixe

bloco 

11. bloco Criar texto com e adicione mais um campo de concatenação.

    • No primeiro parâmetro do bloco

"

12. • Criar texto com

"

13. • , adicione o bloco Pasta reciclável da aplicação.

    • No

segundo parâmetro

14. • segundo parâmetro do bloco

"

15. • Criar texto com

"

16. • , insira o bloco Separador de arquivos.

17. No terceiro parâmetro do bloco

    "

    Criar texto com

    "

    , arraste o bloco Obter campo do Json.

    •  Arraste

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

    • Informe "path" no parâmetro

      "

      Caminho a percorrer

      "

      .

Image RemovedImage Added

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

1. Adicione o bloco lógico

"

2. Se

"

3. e encaixe a variável "transfere". Esse passo só será executado se não houver erro durante a transferência do arquivo.

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

5. Encaixe o bloco Renomear arquivo.

6. Insira o bloco Criar texto com

    no

   no parâmetro

   "

   Caminho do arquivo

   " do

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

7. Insira o bloco Criar texto com

    no

   no parâmetro

   "

   Novo nome

   " do

    do bloco Renomear arquivo.

   Nos 2 parâmetros do bloco último bloco

   "

   Criar texto com

   "

   , adicione

   blocos 

   blocos Obter campo do Json

    e

   e encaixe a variável "info" no parâmetro

   "

   Json

   " de

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

Salve a função "MoverRenomear" para finalizar essa etapa.

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

Figura 8 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 93.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 Modified

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

Image Modified

Figura 10 3.8 - Arquivo utilizado em nosso teste