Upload com barra de progresso

Introduo No meu primeiro artigo vamos ver um exemplo extremamente simples de como construir um upload com barra de progresso. Procurei muito na internet sobre esse assunto e encontrei muitos tutoriais difceis e que exigiriam horas de programao, e convenhamos no isso que queremos. Neste artigo vamos fazer isso de forma simples e rpida. Utilizaremos o componente NeatUpload, grtis e disponvel para download no http://www.brettle.com/neatupload, pode ser usado com o Framework e Mono, com ele o usurio poder monitorar o andamento do upload, obtendo informaes do andamento do upload (Porcentagem), taxa de transferncia, total enviado, tempo de envio, tempo para finalizar envio e opo de cancelar o upload. Instalao 1 Baixe o componente NeatUpload na pgina http://www.brettle.com/neatupload, e pegue a verso mais atual, que hoje NeatUpload-1.2.24.zip , descompacte o arquivo. 2 Na Toolbox do Visual Studio crie uma nova Tab, depois v em Choose Itens e instale a DLL: Brettle.Web.NeatUpload.dll, que estar na pasta Bin do arquivo descompactado conforme a Figura 01.

Figura 01. Instalando DLL.

3 V ao Web.Config e na seo <system.web>, <httpModules> deixe como a Listagem 01 <httpModules> <add name="UploadHttpModule" type="Brettle.Web.NeatUpload.UploadHttpModule, Brettle.Web.NeatUpload" /> </httpModules>
Listagem 01. Cdigo Web.Config.

Iniciando o exemplo

Na pgina que far o upload adicione os controles InputFile, ProgressBar e um Button, no arquivo descompactado copie a pasta NeatUpload e cole na pasta raiz de seu projeto. Note que nas propriedades do componente ProgressBar tem a opo Inline, com ela voc escolhe se a barra de progresso ser em uma popup ou na prpria pgina, fica a seu encargo escolher. Agora sim est quase tudo pronto! Voc j pode rodar a pgina para testar para ver como est ficando.

Figura 02. Testando Upload.

Falta apenas configurarmos onde o arquivo ser salvo, na opo OnClick do Button adicionado adicione o seguinte cdigo: if (InputFile1.HasFile)//Verifica se tem arquivo para upload { InputFile1.TmpFile.CopyTo(Server.MapPath(InputFile1.FileName.ToString())); //Esse componente envia o arquivo para uma pasta temporaria //e de la nos copiamos para onde ns queremos InputFile1.TmpFile.Delete();//Deletando arquivo temporrio. }
Listagem 02. Cdigo de upload.

Finalizando

Seu upload est pronto! Mas voc achou feio aquele visual? Sem problemas! Lembra da pasta NeatUpload que ns copiamos? L tem uma pgina Progress.aspx que voc pode customizar, na mesma pasta tem as imagens que voc pode trocar, s usar a imaginao. Veja um exemplo na Figura 03.

Figura 03. Barra de upload customizada.

Consideraes finais Voc pode ter problemas com o tamanho de arquivo enviado para resolver isso v ao Web.Config e dentro do <system.web> adicione a seguinte linha: <httpRuntime executionTimeout="999999" maxRequestLength="902400" useFullyQualifiedRedirectUrl="false" minFreeThreads="8" minLocalRequestFreeThreads="4" appRequestQueueLimit="100" enableVersionHeader="true"/>
Listagem 04. Resolvendo problemas de upload.

Autor: Gabriel dos Santos Potumati