Upload Ajax Dinâmico

Usando AjaxToolkit da Microsoft e fácil

C#.NET

Thursday, September 6, 2012

Views: 5143 SHARE

Caro(a) Leitor(a) hoje gostaria de falar de upload de dados do seu site para o servidor. Já foi falado isso em outros artigos, porém não era utilizando o Ajax Toolkit da Microsoft; pelo menos neste site.

Hoje a Internet ficou mais rápida, o browser ficou mais dinâmico e cheio de funcionalidades que antes não tinha. Agora, em vez de colocar apenas um arquivo por vez você pode escolher quantos quiser e adicionar tudo de uma vez só.

Segue alguns artigos específicos falando de upload de dados (imagem, arquivo e outros):

Upload sempre NULL - http://ecode10.com/artigo/1473/Upload+sempre+NULL.aspx

ASP.NET 2.0 - FileUpload - http://ecode10.com/artigo/133/ASP.NET+2.0+FileUpload.aspx

Enviando imagem pela Internet - ecode10.com/artigo/32/UPLOAD+Enviando+imagem+pela+Internet.aspx

Nenhum dos links acima funciona como este que estou descrevendo no artigo, principalmente porque não utilizam Ajax Toolkit. A versão da ferramenta que estou utilizando é a 2012 (Visual Studio), a linguagem é o C# e a plataforma ASP.NET.

O primeiro passo para desenvolvimento desse exemplo que é baixar o AjaxToolkit feito pela Microsoft, utilize este link para baixar: http://ajaxcontroltoolkit.codeplex.com. Esta versão funciona apenas com o Framework 4.0 e não 3.5, isto quer dizer que o seu servidor precisa ter o IIS 7.0 e não o IIS 6.0. Para baixar outras versões, no mesmo site existem os links indicando para baixar.

Depois de baixar, extraia o arquivo e coloque em uma pasta comum dentro do seu computador. O próximo passo é indicá-lo como referência dentro do projeto Visual Studio 2012. Faz-se necessário criar uma nova aba dentro do Toolbox e escolher a dll referenciada, isto é, o arquivo que está na pasta.

Figura 1 – DLL referenciada

Note que a figura 1 mostra a dll AjaxControlToolkit referenciada no projeto, ou seja, na pasta References. Para adicionar uma nova aba, basta clicar com o botão direito em cima da Toolkbox e escolher o menu Add Tab, mostrado na figura 2.

Figura 2 – Adicionando tab?

Escreva o nome da TAB que deseja criar, clique com o botão direito em cima novamente focalizando dentro da TAB criada. Escolha o menu Choose Items.... Essa escolha serve para indicar a dll baixada no site e referenciada no projeto.

Todas as ferramentas que te ajudam a desenvolver software dinâmico estão dentro dessa tal DLL.

Figura 3 - Escolhendo Itens

A figura 4 mostra outra tela que aparece depois de clicar no menu Choose Items. Aparecendo a tela, clique no botão Browser e indique a DLL baixada. Depois de indicar vão aparecer os itens marcados como na figura 4.

Figura 4 – Itens marcados

Clicando no botão OK, automaticamente vão aparecer todos os componentes de uso na Toolbox.

Criei uma página web normal chamada WebForm1.aspx, adicionei o ToolkitScriptManager e o UpdatePanel como é de praste acontecer. Listagem 1.

Listagem 1 – ScriptManager e UpdatePanel



<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">asp:ToolkitScriptManager>

         

        <asp:UpdatePanel ID="update" runat="server">

             <ContentTemplate>

ContentTemplate>_

        asp:UpdatePanel>

O próximo passo é adicionar o componente AjaxFileUpload com suas possíveis configurações dentro do UpdatePanel, listagem 2.

Listagem 2 – Adicionando componente de upload Ajax.



_        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">asp:ToolkitScriptManager>

         

        <asp:UpdatePanel ID="update" runat="server">

            <ContentTemplate>

                

                <asp:AjaxFileUpload ID="AjaxFileUpload1"

runat="server" OnUploadComplete="AjaxFileUpload1_UploadComplete" />

 

            ContentTemplate>_

_        asp:UpdatePanel>_

Existe um evento que pode ser adicionado para este componente chamado OnUploadComplete. Ele pode ser criado nas propriedades do próprio que automaticamente cria o método dentro da classe, listagem 3.

Listagem 3 – Método criado

protected void AjaxFileUpload1_UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)

{

string filename = System.IO.Path.GetFileName(e.FileName);

filename = Guid.NewGuid() + filename;

string endereco = "~/img/" + filename;

_AjaxFileUpload1.SaveAs(MapPath(endereco));

}

Dentro do método, você precisa pegar o arquivo adicionado pelo usuário para salvar em algum lugar do seu servidor que está hospedado o seu sistema. Para não ter problemas de arquivos iguais, escolhi gerar um GUID para cada arquivo adicionado, assim a imagem nunca será repetida.

Você pode também verificar se já existe um arquivo com o mesmo nome e gerar um alerta ao usuário, porém dá mais trabalho para fazer. Nos exemplos acima indicados pelo link mostram como fazer isso.

A primeira linha da listagem 3 eu pego o arquivo com o GetFileName. Depois adiciono o GUID no nome do arquivo. Indico a pasta que a imagem deve ser gravada e uso o SaveAs colocando o endereço final.

Esse componente tem vantagens pra cima dos outros, foi feito pela própria Microsoft e é preparado funcionar em browsers com HTML5, ou seja, usando o arrastar e jogar o arquivo.

Customizando Upload

Você pode também customizar o upload usando as propriedades do componente. A primeira propriedade é o ThrobberId. Ele indica uma imagem para mostrar que está carregando, aquela imagem animada com o Load.

Falar em Load, este site http://ajaxload.info/ você pode customizar sua imagem da cor que quiser e da forma que quiser, listagem 4.

Listagem 4 – Imagem Load

<asp:AjaxFileUpload ID="AjaxFileUpload1"

ThrobberID="imgLoad"...>

<asp:Image ID="imgLoad" ImageUrl="load.gif" runat="server" />

Você pode também customizar os tipos de arquivos que o seu sistema vai aceitar para upload de dados, listagem 5.

Listagem 5 – Tipo de dados

<asp:AjaxFileUpload ID="AjaxFileUpload1"

ThrobberID="imgLoad" AllowedFileTypes="jpg,png,gif,jpeg" ...>

Note que coloquei a permissão de apenas arquivos do tipo JPG, PNG, GIF e JPEG, o resto ele não vai pegar para fazer o upload.

Além do tipo, você pode customizar a quantidade de arquivo por vez para cada upload.

Listagem 6 – Número máximo de arquivo

<asp:AjaxFileUpload_ ID="AjaxFileUpload1"_

ThrobberID="imgLoad" AllowedFileTypes="jpg,png,gif,jpeg" MaximumNumberOfFiles="3" ..>

Junto disso tudo, você pode colocar uma chave de contexto dentro do componente, listagem 7.

Listagem 7 – Todo o componente

<asp:AjaxFileUpload ID="AjaxFileUpload1"

ThrobberID="imgLoad"

ContextKeys="mauricio"

AllowedFileTypes="jpg,png,gif,jpeg"

MaximumNumberOfFiles="3"

runat="server" OnUploadComplete="AjaxFileUpload1_UploadComplete" />

Esse componente pode ser usado em browser preparado para HTML5, você arrasta e joga os arquivos que ele vai pegando e anexando. Veja como fica.

A tela carregada mostra que os arquivos podem ser arrastados para o local indicado. Figura 5.

\Figura 5 – Resultado

Ao selecionar uma imagem, ou arrastar para a tela, aparece a lista pronta para upload. Figura 6.

Figura 6 – Lista de imagem.

O botão Remove mostra que a imagem pode ser retirada facilmente. Para finalizar, o botão de UPLOAD clicado passa pelo método responsável por salvar a imagem no servidor. Uma animação aparece no browser mostrando a porcentagem.