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.
<asp:AjaxFileUpload ID="AjaxFileUpload1"
runat="server" OnUploadComplete="AjaxFileUpload1_UploadComplete" />
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
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
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
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
ThrobberID="imgLoad"
ContextKeys="mauricio"
AllowedFileTypes="jpg,png,gif,jpeg"
MaximumNumberOfFiles="3"
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
Maurício Júnior - MCP, MCAD, MVP Microsoft edited Revision 1. Comment: Alterando o usuário de criação