Faz o upload de um ou mais arquivos armazenados no equipamento do usuário. Essa função é assíncrona e mantém os arquivos apenas durante a execução da função.
Acesse o tópico "Upload de arquivos" na página Arquivos para conhecer outras formas de fazer upload no Cronapp. |
Figura 1 - Bloco Upload
A variável padrão item armazenará os arquivos enviados entro da entrada de comando Após envio. Essa variável irá conter um array com os endereços temporários dos arquivos selecionados para envio.
Caso o valor do parâmetro Múltiplos seja definido como "Sim" a função permite o envio de múltiplos arquivos de uma só vez. Caso o valor seja "Não" apenas o envio de um arquivo por vez é permitido.
Descrição a ser apresentada na janela de seleção do(s) arquivo(s).
Exemplo: "Selecione o(s) arquivo(s) para serem enviado(s)."
Tipo(s) de arquivo(s) permitido(s) 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.
Exemplo: ".pdf, .xls, .doc, .ppt, .avi, .mpeg, .jpg, .jpeg, .gif, .mp4, .png, .csv e etc".
Tamanho máximo de cada arquivo a ser enviado.
Exemplo: "10MB"
Valor a ser definido na função que possibilita o envio de múltiplos arquivos.
Exemplo: "Sim", "Não"
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: mover os arquivos para outro diretório.
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.
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. |
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.
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.
Figura 1.2 - Bloco de programação
É 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.
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.
Figura 2.1 - Adicionando CSS inline no campo Descrição
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.
src/main/webapp/css/app.css
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,
/** 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.
Figura 3 - Modal modificado
Para mais detalhes sobre a estrutura do HTML que constrói o modal, acesse o arquivo base em:
|
Nesta página