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):

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.












Figura 7 – Resultado final




A imagem foi adicionada com o GUID.  Figura 8.









Figura 8 – Imagem com GUID adicionada




A solução funcionou perfeitamente. Bom, espero que tenha gostado e qualquer dúvida pode entrar em contato pelo site.