Multi-Upload com ASP.NET usando JQuery e escrita na sess??o do Handler

Apesar do t??tulo grande e, para uns, confuso, nesse t??pico irei ajudar muitos a resolver um problema: m??ltiplos uploads de vez sem precisar selecionar cada arquivo.

A id??ia primordial ?? fazer com que o usu??rio possa clicar em um bot??o, selecionar v??rios arquivos de vez (que nem o GMail) e fazer o envio para uma pasta desejada. Para isso iremos utilizar um Handler em C# para fazer o upload. Mas nesse mesmo Handler irei escrever na sess??o para que possa utilizar em outra p??gina. Lembrando que as vari??veis de sess??o, para usar dentro de um Handler precisa-se de um artif??cio. Sem mais delongas, vamos ?? solu????o.

Crie ou abra um Web Site Project e nele adicione um Generic Handler. Coloque com o nome Upload.ashx para ficar mais f??cil de encontr??-lo. Insira o seguinte c??gido:

using System;
using System.Data;
using System.IO;
using System.Web;
using System.Web.SessionState;

public class Upload : IHttpHandler, IRequiresSessionState{

        public void ProcessRequest (HttpContext context) {
                context.Response.ContentType = “text/plain”;
                context.Response.Expires = -1;
                try
                {
                        // Obt??m o arquivo a ser postado
                        HttpPostedFile postedFile = context.Request.Files[“filedata”];
                        // Caminho
                        string path = context.Server.MapPath(“~/Upload/”);
                        string filename = postedFile.FileName;
                        // Cria diret??rio de n??o existir
                        if (!Directory.Exists(path))
                                Directory.CreateDirectory(path);
                        // Verifica se o arquivo j?? existe com mesmo nome
                        string nome = filename.Substring(0, filename.LastIndexOf(“.”));
                        string extensao = filename.Substring(filename.LastIndexOf(“.”) + 1);
                        int i = 1;
                        // Verifica se existe, sen??o renomeia
                        while (File.Exists(path + @”” + filename))
                        {
                                filename = nome + “(“ + i + “).” + extensao;
                                i++;
                        }
                        // Adiciona na sess??o
                        DataTable galeria = (DataTable)context.Session[“galeria”];
                        DataRow item = galeria.NewRow();
                        item[“imagem”] = filename;
                        galeria.Rows.Add(item);
                        context.Session[“galeria”] = galeria;
                        // Salva arquivo
                        postedFile.SaveAs(path + @”” + filename);
                        // Retorna o arquivo salvo
                        context.Response.Write(path + “/” + filename);
                        context.Response.StatusCode = 200;
                }
                catch (Exception ex)
                {
                        context.Response.Write(“Erro: “ + ex.Message);
                }
        }


        public bool IsReusable {
                get {
                       return true;
                }
        }

}
 
Pronto! J?? temos nosso Handler que faz o upload de um arquivo e o adiciona em um DataTable. Esse DataTable j?? estava previamente adicionado na sess??o. Voc?? pode utilizar quaisquer outra estrutura para armazenar. A dica da escrita na sess??o no Handler est?? na heran??a da interface IRequiresSessionState onde permitir?? fazer isso.
 
Crie uma p??gina ASPX e referencie os JavaScripts do JQuery abaixo (os arquivos, caso n??o possuam, irei disponibilizar em um link abaixo) e um CSS pra dar um estilo legal:

<link rel=”stylesheet” type=”text/css” href=”css/stilo.css” />
<script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”js/jquery.uploadify.js”></script>

Agora adicione um controle FileUpload e um link (ou um controle HyperLink). Iremos tamb??m fazer a chamada do JQuery para ser aplicado sobre o FileUpload ficando dessa forma:

<asp:FileUpload ID=”Fotos” runat=”server” />
<input type=”button” onclick=”javascript:$(‘#<%=Fotos.ClientID%>‘).fileUploadStart();” value=”Enviar” />
<script type=”text/javascript”>
$(window).load(
       function() {
       $(“#<%=Fotos.ClientID %>”).fileUpload({
           ‘uploader’: ‘js/uploader.swf’,
           ‘cancelImg’: ‘imagens/cancelar.png’,
           ‘buttonText’: ‘Selecionar’,
           ‘script’: ‘Upload.ashx’,
           ‘folder’: ‘Upload’,
           ‘fileDesc’: ‘Selecione arquivos do tipo imagem’,
           ‘fileExt’: ‘*.jpg;*.jpeg;*.gif;*.png’,
           ‘multi’: true,
           ‘auto’: false
       });
      }
);
</script>

Agora rode a aplica????o. Ver?? apenas um bot??o com o nome Selecionar. Ao clicar ir?? abrir um pop-up pedindo para selecionar os arquivos. Selecione um ou mais e clique em OK. Ver?? que ser?? montado uma lista com os arquivos que ir??o ser enviados. Voc?? poder?? remover itens clicando no X sobre cada um deles. Ao clicar no link Enviar, ser?? feito uma chamada para cada item sobre o Handler fazendo o envio para a pasta Upload e adicionando no DataTable armazenado na sess??o.

N??o vou entrar muito em datelhes, porque est?? bem f??cil e compreens??vel o c??digo. Se desejar, ao inv??s de clicar em Enviar para fazer o envio, voc?? pode deixar autom??tico (como se fosse uma trigger) mudando o par??metro ‘auto’ para true da chamada JQuery. Ent??o, ao selecionar e clicar em OK automaticamente ser?? feito o upload. Se tamb??m quiser que o link fa??a um PostBack na p??gina, basta colocar depois da chamada de in??cio do upload, insira o __doPostBack(”,”); colocando par??metro ou n??o dependendo do que for fazer com ele ap??s.

Nesse link aqui encontram-se alguns arquivos necess??rios para que possam utilizar. N??o vou colocar os fontes ASP.NET porque sen??o j?? seria demais, n??? M??os ?? obra…

Obs: a fonte e outras mat??rias sobre o mesmo t??pico voc?? acha a?? pela net. N??o me lembro qual site eu havia visto algo do tipo e fiz essa. Mas fica a dica a??!