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

<code>

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

        

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

            <ContentTemplate>

</ContentTemplate>

        </asp:UpdatePanel>

</code>

                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.

<code>

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

</code>

                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.

This article was originally written by:

Maurício Júnior
MCP, MCAD, MVP Microsoft
www.mauriciojunior.org
blog.mauriciojunior.org                         
www.ecode10.com