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.

Figura 1 - Bloco Upload

Compatibilidade

• Bloco servidor: cronapi.util.Operations.upload() 

Retorno

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.

Características do bloco

• É necessário que o usuário manipule o(s) arquivo(s) de forma imediata, definindo as ações a serem executadas sobre o(s) arquivo(s) no parâmetro Após envio. (callback)
• Os arquivos são apagados logo após a execução dos comandos definidos no parâmetro Após envio. (callback)

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

Parâmetros

Descrição

Descrição a ser apresentada na janela de seleção do(s) arquivo(s).

• Posição: 1
• Inglês: Description
• Tipo: Texto / String 

• Exemplo: "Selecione o(s) arquivo(s) para serem enviado(s)."

Filtros

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. 

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

• Posição: 5
• Inglês: After upload
  
• Tipo: Comando com retorno ("item") / Command with return ("item")

• Exemplo: mover os arquivos para outro diretório.

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.

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

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.

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

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, 

/** 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