Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
O componente envio de arquivo dinâmico é utilizado para fazer o upload de arquivos de tipos variados (.txt, .png, .jpg, .pdf, etc.), podendo ser adicionado dentro de pastas no seu projeto ou até mesmo em locais externosqualquer 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.
Figura 1 - Exemplo do componente rodando no Browser
Dica |
---|
Acesse o tópico "Upload de arquivos" na página Arquivos para conhecer outras formas de fazer upload no Cronapp. |
Principais propriedades
Propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome | Propriedade | Função | ||
---|---|---|---|---|
ConteúdoTítulo | content | Alterar o rótulo título do componente. | ||
Texto interno | content | Define o texto interno do componente. | ||
Valor | ng-model | Propriedade AngularJS Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. | ||
Conteúdo | label | Altera o texto que irá aparecer como título agregando informações ao componente do upload. | ||
Informações do arquivo | file-info | Permite selecionar um campo na tela ou na fonte de dados para guardar as seguintes informações: nome do arquivo, extensão e tipo do arquivo. Essa propriedade só irá funcionar quando o tipo do atributo for Arquivo no Banco. | Informações do arquivo | file-info|
Tamanho máximo do arquivo | max-file-size | Estipula em MB Especifica o tamanho máximo em MB do arquivo que será aceito. | ||
Requerido | ng-required | Específica sem o campo será ou não obrigatório. | ||
Arquivos permitidos | accept-file | Define quais os formatos de arquivos são suportados pelo componente, são eles:
Também é possível filtrar por uma extensão específica ou uma lista de extensões, é importante colocar aspas simples por exemplo:
| ||
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. | ||
Estilo | style | Altera o estilo do componente de forma inline. | ||
Exibir | ng-show | Propriedade AngularJS Angular usada para exibir ou ocultar o componente. | ||
Repetir | crn-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. | ||
Segurança | cronapp-security | Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados. | ||
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. | ||
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Eventos
Na tabela abaixo estão descritos os eventos disponíveis para o componente.
Utilizando via Diagrama
Nome | Propriedade | Função |
---|---|---|
Ao Iniciar | ng-init | Executa uma ação assim que o componente é renderizado na tela. |
Ao Clicar | ng-click | Executa uma ação quando o componente receber um clique com o mouse ou um toque na tela. |
Ao Duplo Clicar | ng-dblclick | Executa uma ação quando o usuário clica duas vezes seguidas com o botão do mouse em um componente. |
Ao Entrar com Mouse | ng-mouseenter | Executa uma ação quando o ponteiro do mouse é movido de fora para dentro do componente. |
Ao Sair com Mouse | ng-mouseleave | Executa uma ação quando o ponteiro do mouse é movido de dentro para fora do componente. |
Ao Mover Mouse | ng-mousemove | Executa uma ação enquanto o ponteiro do mouse está sendo movido sobre o componente. |
Estilos
Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente.
Nome em português | Nome em inglês | Descrição |
---|---|---|
Título | Title | Estiliza o título do componente. |
Campo pontilhado | Dotted field | Estiliza o campo pontilhado do componente. |
Botão | Button | Estiliza o botão do componente. |
Adicionar via gerador de CRUD
Nota |
---|
Para seguir os passos abaixo, é recomendável habilitar a opção Modo Avançado. |
O componente é automaticamente adicionado no formulário ao utilizar o gerador de Para utilizar o componente de arquivo no Cronapp você poderá gerá-lo através do CRUD no Diagrama com os atributos do Tipo do Arquivo no Banco ou Arquivo no Cloud (para saber como configurar atributos no Cloud acesse a documentação).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 Added
Image Removed
Figura 2 - Atributos do tipo Arquivo no Banco e 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.
Informações |
---|
Vale lembrar que não é necessário gerar o CRUD com esse campo de informações do arquivo. Estamos gerando apenas para facilitar a explicação. |
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
Dica |
---|
O nome do campo não é uma expressão. Assim, se após salvar a janela, o valor do campo ela estiver entre chaves duplas "{{}}", retire as chaves. |
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 Removed
Image Added
Figura 4 2.3 - Componentes Arquivo gerados pelo CRUD.
Utilizando de forma independenteAdicionar manualmente
Nota |
---|
Para seguir os passos abaixo, é necessário habilitar a opção Modo Avançado. |
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:
- Arraste o componente envio de arquivo dinâmico para a view;
- Arraste o componente botão para a view;
Image Removed
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
Após realizar o upload do arquivo o Cronapp irá colocá-lo temporariamente no diretório:
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:
5874aa6e826a4bbf8828cca7407ca8bb.bin: arquivo imagem enviado pelo usuário, porém renomeado;
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.
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
{ "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.
Informações |
---|
Esse exemplo foi montado para ser didático, não recomendamos que arquivos sejam hospedados na pasta da aplicação. Para isso, existem serviços como o armazenamento do Serviço de Cloud do Cronapp, que possui um baixo custo e provê maior segurança. |
Editor de view
Criamos a view Upload e, no formulário 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 3.1).
Image Added
Figura 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 3.2).
Image Added
Figura 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: Blocos de Programação/Servidor
Tooltip | ||||
---|---|---|---|---|
| ||||
Endereço: |
) do seu projeto.
View file | ||||||||
---|---|---|---|---|---|---|---|---|
|
Arquivo 1 - Arquivo blockly com a função MoverRenomear
Image Added
Figura 3.3 - Primeira parte do bloco de programação
Defina uma variável com nome "dadosArquivo"e obtenha o valor (
ng-model
)
Criando dois arquivos de referência: um .bin que traz o conteúdo do arquivo e outro .md que traz as informações do arquivo como nome e tipo.
Persistindo Arquivo
Para que você persista seu arquivo em uma pasta do seu projeto será necessário a criação de um bloco de programação do tipo servidor
- Crie um novo bloco do tipo servidor com nome do arquivo Salvar e Nome da Função mover
- Acesse a aba de Propriedades do bloco de programação
- Clique sobre formulário de referência e selecione Upload
Image Removed
Figura 7 - Selecionando view ao bloco
Para desenvolver a lógica do bloco de programação mover siga os passos abaixo:
Image Removed
Figura 8 - Função mover
- 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 (
ng-model
) para "arquivoDinamico ;Defina uma variável com nome info quer irá receber informações em formato JSON da variável dadosArquivo;".
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 3.4 - Segunda parte do bloco de programação
Defina uma variável com
nome transfere quer irá receber um retorno verdadeiro ou falso:Adicione nome "transfere" que receberá true ou false do bloco Mover arquivo.
Encaixe o bloco Mover arquivo
:e no parâmetro Caminho de destino, adicione o bloco Pasta da aplicação.
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.- No Caminho de destino adicione o bloco Pasta da aplicação onde será persistido o nosso arquivo.
- 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.
- 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
- Defina uma variável com nome renomeia;
- Adicione o bloque Renomear arquivo
- Caminho do arquivo iremos passar o caminho onde ele se encontra
- Pasta da aplicação / campo path do JSON da variável info
- Novo nome criaremos com o campo name e com o campo fileExtension que se encontra no JSON da variável info
- Caminho do arquivo iremos passar o caminho onde ele se encontra
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
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.
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 3.5 - Última parte do bloco de programação
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.
Defina uma variável com o nome "Renomeia", ela receberá true ou false do bloco Renomear arquivo.
Encaixe o bloco Renomear arquivo.
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:
Obter campo do Json, informando novamente a variável "info" e o termo "path".
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".
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 Added
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 Added
Figura 3.7 - 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 103.8).
Image Modified
Figura 3.8 - Arquivo utilizado em nosso teste
Nome em inglês
Dynamic File
Nessa Nesta página
Índice | ||||
---|---|---|---|---|
|
Compatibilidade
Formulário web
Equivalente mobile
Botão do Componente
Image Removed
Image Added
Imagem no Editor Visual
Image Removed
Image Added