para envio. Pode-se definir mais de um tipo de arquivo/extensão no parâmetro Filtros da função. Para isso basta utilizar o caractere virgula (,) como separador das extensões.
O parâmetro Filtro também aceita MIME Types. Assim, ao invés de inserir diversas extensões do tipo imagem, basta inserir o MIME Types: image/*. Serão aceitas extensões de imagens, como .png, .jpg, .svg, .git, .bpm e outras. Acesse o link maiores informações sobre MIME Types.
- Posição: 2
- Inglês: Filters
- Tipo: Texto / String
Exemplo: ".pdf, .xls, .doc, .ppt, .avi, .mpeg, .jpg, .jpeg, .gif, .mp4, .png, .csv e etc".
Tamanho máximo
Tamanho máximo de cada arquivo a ser enviado.
- Posição: 3
- Inglês: Maximum size
- Tipo: Texto / String
Exemplo: "10MB"
Múltiplos
Valor a ser definido na função que possibilita o envio de múltiplos arquivos.
- Posição: 4
- Inglês: Multiples
- Tipo: Boleano / Boolean
Exemplo: "Sim", "Não"
Após envio
Ações que devem ser realizadas após o recebimento dos arquivos.
A variável "item" sempre retornará um array, mesmo que o parâmetro Múltiplo esteja configurado como "Não".
Exemplo 1
A função abaixo em destaque faz o upload de um ou múltiplos arquivos, desde que atenda os filtros referentes aos tipos de arquivos e tamanho máximo de 200MB. Utilizamos o bloco para cada item na lista para percorrer a lista com os itens que o usuário selecionou e armazená-los na variável arquivos. Esses arquivos serão movidos do seu diretório temporário para um diretório criado na raiz do projeto (ArquivosUpload) através da função Mover arquivo.
Informações |
---|
O bloco Mover arquivo não cria diretórios, dessa forma, é necessário informar um endereço real do projeto no parâmetro Caminho de destino. |
Image Added
Figura 1 - Função que irá obter o(s) arquivo(s)
Ao executar o bloco um modal será aberto, clique no centro para abrir a janela e selecione o(s) arquivo(s) que desejar.
Image Added
Figura 1.1 - Modal do bloco para seleção do arquivo
Após fazer o upload dos arquivos, nossa função moverá os arquivos para a pasta "/ArquivosUpload/
", definida na função da figura 1.
Image Added
Figura 1.2 - Bloco de programação
Exemplo 2
É possível alterar o texto do campo Descrição aplicando CSS inline, podemos alterar a cor do texto, tamanho, deixá-lo em negrito, etc. No exemplo da figura abaixo, modificamos um pouco o texto do modal upload, deixamos a frase em negrito e demos destaque em cor vermelha para a quantidade de arquivos que o usuário pode adicionar.
Image Added
Figura 2 - Adicionando CSS inline no campo Descrição
Na figura 2.1 é possível conferir o resultado das alterações aplicadas na figura 2.
Image Added
Figura 2.1 - Adicionando CSS inline no campo Descrição
Exemplo 3
Podemos também modificar o CSS do modal inteiro, para fazer isso precisamos adicionar o código CSS no arquivo app.css, podemos encontrar esse arquivo tanto no lado web, quanto no mobile.
- Endereço web:
src/main/webapp/css/app.css
- Endereço mobile:
src/main/mobileapp/www/css/app.css
Para fazer qualquer tipo de alteração no modal, o usuário precisa utilizar o id #uploadForm
, dessa forma, todas as tags HTML que contiverem esse id sofrerão mudanças,
Bloco de código |
---|
language | css |
---|
title | app.css |
---|
linenumbers | true |
---|
|
/** Título do Modal **/
#uploadForm h4 {
color: green;
}
/** Botão Cancelar do Modall **/
#uploadForm button {
background-color: red;
}
/** Descrição do Modall **/
#uploadForm div.drop-box span {
font-family: monospace;
font-size: xxx-large;
text: bold;
} |
A partir das configurações feitas no código acima, o modal ficará como o apresentado na figura 3.
Image Added
Figura 3 - Modal modificado
Nota |
---|
Para mais detalhes sobre a estrutura do HTML que constrói o modal, acesse o arquivo base em: src/main/webapp/node_modules/cronapp-framework-js/components/upload/upload.html Atenção: node_modules é o local onde ficam armazenadas diversas bibliotecas usadas pelo Cronapp apenas no período de desenvolvimento do projeto. Durante as atualizações do Cronapp, o conteúdo dessa pasta é alterado ou substituído, por isso não recomendamos atualizar ou adicionar nada manualmente, caso ocorra alguma atualização, o conteúdo será modificado sem aviso.
|