Editor Ajax com Imagem

ASP.NET

Tuesday, September 11, 2012

Caro(a) Internauta, gostaria falar hoje sobre o editor Ajax que a Microsoft disponibilizou para nós através do AjaxToolkit. Existem vários outros componentes no mercado que servem como editor, porém este foi o que me ajudou de forma simples a fazer upload de imagem no próprio componente.

Quero dizer que no próprio editor, consegui colocar um botão com imagem para fazer upload de forma dinâmica.

As ferramentas utilizadas foram:

- Visual Studio 2012

- Framework .NET 4.0

- Componente AjaxToolkit (www.asp.net)

- Plataforma ASP.NET (web)

- Linguagem C#.NET

A figura 1.1 mostra como vai ficar a tela com o editor de texto . Note que existem os botões customizados dentro do próprio editor. Um botão desses funciona o upload de imagem. Vamos ver como ficará o código para aparecer isso na tela.

Figura 1.1 – Editor de texto com imagem

Com este exemplo da figura 1.1, ao clicar no botão da imagem automaticamente aparece outra tela para fazer o upload com a quantidade que achar necessário e no formato que achar melhor, basta configurar.

O primeiro passo é colocar os componentes no seu Visual Studio 2012, acesse o link abaixo que fala como colocar a dll.

Link: http://www.ecode10.com/artigo/1602/Upload+Ajax+Dinamico.aspx

Depois de adicionar os componentes na ferramenta, basta utilizá-lo. Crie uma página e adicione as linhas a seguir. Após a tag chamada

Listagem 1.1 – Primeira linha

Para isso, o topo da página terá um registro do assembly, listagem 1.2.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

Listagem 1.2 – Registro do Ajax na página

O próximo passo é adicionar o HTMLEditorExtender dentro da página. A regra dele é simples. Coloque um textbox e o que ficará no topo da barra, listagem 1.3.

DisplaySourceTab="true" runat="server" EnableSanitization="false">

Runat="server" Height="545px" Width="693px" />

Listagem 1.3 – Usando HTMLEditorExtender

Até o momento, mexemos apenas com o editor de HTML. Note que coloquei dentro do o item para ter a opção da letra ficar em negrito. O para ter a opção da letra ficar itálica e o para deixar a letra com um traço abaixo.

Note que o campo textbox txtComments foi indicado como TargetControlId e ainda existe o do tipo MultiLine com a quantidade de colunas e linhas.

Depois disso, é necessário customizar algumas coisas importantes no editor HTML. O primeiro passo é gerar um método chamado OnImageUploadComplete, listagem 1.4.

OnImageUploadComplete="MyHtmlEditorExtender_ImageUploadComplete"

DisplaySourceTab="true" runat="server" EnableSanitization="false">

Listagem 1.4 – Adicionando o método OnImageUploadComplete

Para adicionar o método basta escrever o nome e no momento certo a ferramenta vai te perguntar se gostaria de gerar o método no arquivo .cs.

O próximo passo é colocar mais um atributo dentro da tag , listagem 1.5.

Listagem 1.5 – Adicionando tag InsertImage.

Agora o editor HTML está pronto para adicionar a imagem, pelo menos o HTML. Veja como ficou o componente HTML. Precisamos agora programar a parte do C#, listagem 1.6.

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

{}

Listagem 1.6 – Adicionando código para upload

A listagem 1.6 mostra o código para upload da imagem vazio e precisa colocar códigos dentro. O que precisa colocar é o código que pega a imagem, pega o endereço para gravar e envia a para o local especificado.

Para não ter problemas com o nome da mesma imagem, adicionei sempre um GUID na frente do nome da imagem, ao invés de verificar sempre se uma imagem já existe com aquele nome.

Depois de salvar a imagem dentro do diretório do seu servidor ou computador local, basta mandar a imagem ser exibida no controle HTML, listagem 1.7.

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

filename = Guid.NewGuid() + filename;

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

var ajaxFileUpload = (AjaxFileUpload)sender;

ajaxFileUpload.SaveAs(MapPath(endereco));

e.PostedUrl = Page.ResolveUrl(endereco);

Listagem 1.7 – fazendo upload da imagem

A primeira linha pega o nome do arquivo. A segunda linha adiciono um GUID antes do nome. Depois criei uma variável de endereço indicando a pasta "~/img" onde vai ficar a imagem.

Depois peguei o "sender" vindo do método e transformei em AjaxFileUpload com a variável do tipo var. Peguei a variável e chamei o método "SaveAs" para salvar a imagem na pasta com o endereço criado.

Para exibir a imagem dentro do controle, adicionei o e.PosteURL = Page.ResolveUrl(endereco), assim a imagem aparece carregada dentro do controle. Listagem 1.8.

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

{

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

filename = Guid.NewGuid() + filename;

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

// Save uploaded file to the file system

var ajaxFileUpload = (AjaxFileUpload)sender;

ajaxFileUpload.SaveAs(MapPath(a));

// Update client with saved image path

e.PostedUrl = Page.ResolveUrl(a);

}

Listagem 1.8 – Método que faz upload.

Ainda falta colocar no "load" na página para configurar o componente.

protected void Page_Load(object sender, EventArgs e)

{

var ajaxFileUpload = MyHtmlEditorExtender.AjaxFileUpload;

ajaxFileUpload.AllowedFileTypes = "jpg,jpeg";

ajaxFileUpload.MaximumNumberOfFiles = 5;

}

Listagem 1.9 – Page_Load da página

No Page_Load adicionei o nome do editor e configurei para aceitar apenas o arquivo do tipo JPG e JPEG. Você pode adicionar vários outros como PNG, GIF e BMP; basta separar por vírgula os tipos diferentes.

A linha abaixo informa a quantidade de arquivos que podem ser feitos upload, o controle Ajax controla isso. Ao clicar na imagem apareceu a tela pedindo para selecionar ou arrastar a imagem para dentro. Figura 1.2

Figura 1.2 – Tela pra upload.

Ele só aceitar jogar a imagem se o seu browser estiver preparado para HTML5. Caso estiver usando ou browser mais velho o componente aparece apenas o botão para selecionar. Esse componente permite que a seleção dos arquivos seja do tipo dinâmico, isto é, mais de um ao mesmo tempo.

Depois que cliquei no botão selecionar, apareceu o meu computador para escolher os arquivos/imagens. Figura 1.3.