O jQuery possui um plugin bastante interessante, chamado Uploadfy, que permite realizar multi upload de arquivos em aplicações Web. O Uploadfy é uma mistura de Javascript com ActionScript, que, juntamente com uma linguagem de programação rodando no lado servidor (ASP.NET, PHP ,etc.), oferece um poderoso recurso para realizar uploads.
A principal característica deste plugin é a possibilidade de selecionar mais de um arquivo no momento do upload, recurso este não disponível pelo controle de upload do ASP.NET.
Além disto, este plugin pode ser bem customizável na aplicação, permitindo configurar diversas opções de forma simples, característica comum a plugins do jQuery.
Criando o projeto
Vamos começar criando um projeto Web no Visual Studio 2008, utilizando a linguagem C#. Abra o Visual Studio, selecione: File=>New Project. Selecione o template ASP.NET WebApplication, e crie um novo projeto com o nome MultiUpload.
Antes de começar a codificar, precisamos realizar o download dos arquivos do Uploadfy. Acesse o link http://www.uploadify.com/download/, baixe a versão 2.1.4., salve-a em um diretório local, e descompacte o arquivo.
Voltando ao Visual Studio, crie uma nova pasta no projeto: click com o botão direito no projeto => New Folder. Dê o nome de Uploadfy a nova pasta.
Adicione os arquivos baixados anteriormente a esta pasta criada: click com o botão direito na pasta => Add Existing item. Procure pela pasta onde estão os arquivos descompactados e adicione-os.
Observação: Não iremos precisar do arquivo uploadfy.php, pois será utilizado um arquivo handler.ashx para realizar o processamento dos arquivos carregados no sistema.Segue abaixo a lista de arquivos adicionados ao projeto:
Vamos utilizar a página Default.aspx (criada automaticamente) para implementar o upload. Adicione à página um controle FileUpload, com a propriedade Id=”fupMulti”. Quando a página for carregada, este controle será substituído automaticamente pelo controle de upload do Uploadfy.
Adicione agora uma tag html <div>, que será o container onde serão apresentados os arquivos carregados durante o upload. Segue abaixo o código contendo os elementos citados acima:
Observe que definimos o id do elemento <div> como “arquivosContainer”. Este id será utilizado posteriormente no método do Uploadfy.
O próximo passo é adicionar o arquivo CSS e as bibliotecas Javascript do JQuery e do Uploadfy, que se encontram na pasta do Uploadfy adicionada anteriormente ao projeto, a página Default.aspx. Para adicionar as referências, basta arrastar cada arquivo até a página. Segue abaixo como devem ficar as referências dentro da tag <head>:
Feito isso, é necessário adicionar, na mesma tag <head>, a função Uploadfy(), responsável por criar uma instância do uploader. Veja como deve ficar código da função:
Como pode ser observado, está função possui algumas opções que podem ser customizadas. Vamos a elas:
| Propriedade | Função | Tipo do Parâmetro |
| auto | Realiza o upload dos arquivos automaticamente, a medida que são adicionados a fila de upload | boolean |
| buttonText | Define o texto que irá aparecer no botão de upload | string |
| cancelImg | Caminho da imagem que será usada no botão cancelar | string |
| displayData | Tipo de informação que será apresentada durante um upload (porcentagem,barra de progresso ou ambos) | string |
| folder | Caminho da pasta onde serão armazenados os arquivos | string |
| fileExt | Lista de extensões permitidas no upload | string |
| multi | Permitir multiupload de arquivo | boolean |
| queueSizeLimit | Número limite de arquivos que podem ser adicionados por vez | int |
| queueID | ID do elemento na página que será usado como arquivo da fila | string |
| removeCompleted | Habilita a remoção automática dos arquivos que foram carregados | boolean |
| Script | Caminho do arquivo que irá processar os arquivos carregados | string |
| sizeLimit | Limite de bytes permitido para cada arquivo carregado | int |
| Uploader | Caminho correspondente ao arquivo uploadfy.swf | string |
A função também possui os seguintes eventos:
- onSelectOnce: Trigger acionada para cada arquivo carregado na fila.
- onAllComplete: Trigger acionada quando o upload de todos os arquivos foram finalizados.
É importante ressaltar que existem outras propriedades e eventos presentes no plugin do Uploadfy, que permitem customizar ainda mais o controle. Neste artigo, iremos utilizar apenas estas citadas acima, que serão suficientes para nossa aplicação.
Note que a função Uploadfy() possui uma propriedade chamada script, que armazena o caminho do arquivo responsável pelo processamento das imagens carregadas. No nosso exemplo,vamos criar um arquivo do tipo handler (.ashx), que irá recuperar o nome do arquivo que está sendo carregado, e então salvar este nome em um arquivo texto .
Adicione este arquivo na pasta Uploady, criada anteriormente. Click com o botão direito na pasta, selecione Add => New Item. Selecione o arquivo do tipo Generic Handler, e dê onome de Handler.ashx.
Adicionado o arquivo, vamos acrescentar o seguinte código no corpo do método ProcessRequest ():
No trecho acima, o arquivo postado é passado a um objeto do tipo HttpPostedFile. O restante do código cria um arquivo texto no diretório raiz do c:\teste, e escreve neste arquivo o nome do arquivo postado.
Este método será invocado automaticamente cada vez que um arquivo for carregado.
Testando a aplicação
Antes de executar a aplicação, adicione um breakpoint dentro do método ProcessRequest(), do arquivo Handler.ashx. Isso nos mostrará o momento em que o método é chamado peloUploadfy.
Execute o projeto e veja o resultado. Note que o controle de FileUpload do ASP.NET não aparece na tela. Ele foi substituído pelo botão “Selecionar”. Selecione uma pasta que contenha imagens e perceba que é possível selecionar mais de um arquivo, bastando apenas pressionar a tecla Ctrl e escolher os arquivos:
Ao selecionar os arquivos, os mesmos serão listados no container que adicionamos, e o processo de carregamento iniciará. Perceba que para cada arquivo carregado, é acionado ométodo ProcessRequest(), do arquivo handler.ashx, que, em nosso exemplo, tem a função de gravar o nome do arquivo carregado em um arquivo texto:
Ao final do processamento, são apresentados os arquivos carregados e o status dos mesmos.
Neste artigo foi apresentado o plugin Uploadfy, do JQuery . Este plugin permite realizar multi upload de arquivos, recurso este parecido com o utilizado pelo e-mail do Gmail para anexar arquivos.
Uma característica do Uploadfy que vale ser destacada é a quantidade de opções que podem ser customizadas de forma bastante simples, como por exemplo, tamanho máximo dos arquivos, extensões permitidas, imagens para botões de cancelamento e seleção, entre outros.
Até a próxima.
