Upload utilizando Adobe Flex e ASP.NET

Em algumas aplicações que construímos é essencial permitir ao usuário fazer o UPLOAD de arquivos.

Neste artigo vou demonstrar como construir um componente Button com a funcionalidade de fazer o upload no Adobe Flex e como preparar o ASP.NET para salvar o arquivo no servidor.

Primeiro criaremos o componente uploadButton estendendo a classe Button, conforme o código abaixo.

package br.com.igormusardo.component<br />{<br />	import flash.events.Event;<br />	import flash.events.MouseEvent;<br />	import flash.events.ProgressEvent;<br />	import flash.net.FileReference;<br />	import flash.net.URLRequest;<br />	import flash.net.URLRequestMethod;<br /><br />	import mx.containers.TitleWindow;<br />	import mx.controls.Button;<br />	import mx.controls.ProgressBar;<br />	import mx.core.Application;<br />	import mx.managers.PopUpManager;<br /><br />	public class uploadButton extends Button<br />	{<br />		/**<br />		* Define qual o arquivo .NET será chamado para realizar o upload físico do arquivo<br />		*/<br />		private const UPLOAD_URL:String = "uploadFile.ashx";<br /><br />		private var fr:FileReference;<br />		private var pb:ProgressBar = new ProgressBar();<br />		private var tw:TitleWindow;<br /><br />		/**<br />		* Inicializa o FileReference e adiciona os EventListeners <br />		*/<br />		public function uploadButton():void {<br />		    fr = new FileReference();<br />		    fr.addEventListener(Event.SELECT, selectHandler);<br />		    fr.addEventListener(Event.OPEN, openHandler);<br />		    fr.addEventListener(ProgressEvent.PROGRESS, progressHandler);<br />		    fr.addEventListener(Event.COMPLETE, completeHandler);<br />		}<br /><br />		/**<br />		* Prepara o label da barra de progressão para informar o % de envio do arquivo<br />		*/<br />		private function openHandler(event:Event):void {<br />		    pb.label = "Uploading %3%%";<br />		}<br /><br />		/**<br />		* Atualiza o percentual concluído.<br />		*/<br />		private function progressHandler(event:ProgressEvent):void {<br />		    pb.setProgress(event.bytesLoaded, event.bytesTotal);<br />		}<br /><br />		/**<br />		 * Após o upload completo, é alterado o label da barra de progressão, informando ao usuário o fim da operação <br />		 */<br />		private function completeHandler(event:Event):void {<br />		    pb.label = "Upload Complete";<br />		    PopUpManager.removePopUp(tw);<br />		}<br /><br />		/**<br />		 * Após o arquivo selecionado o upload é executado. <br />		 */<br />		private function selectHandler(event:Event):void {<br />		    var request:URLRequest = new URLRequest();<br />		    request.url = UPLOAD_URL;<br />		    request.method = URLRequestMethod.POST;<br />		    openWindow()<br />		    fr.upload(request);<br />		}<br /><br />		/**<br />		 * Abre popUp com a progressBar. <br />		 */<br />		private function openWindow():void{<br />			tw = new TitleWindow();<br />			tw.title = "Uploading File";<br />			tw.width= 250;<br />			tw.height= 80;<br />			pb.percentHeight = 100;<br />			pb.percentWidth = 100;<br />			tw.addChild(pb); <br />			PopUpManager.addPopUp(tw, this, true);<br />			tw.x = (Application.application.width - tw.width) / 2; <br />			tw.y = (Application.application.height - tw.height) / 2;<br />		}		<br /><br />		/**<br />		* Abre a janela para escolher o arquivo a ser feito o upload.<br />		*/					<br />		override protected function clickHandler(event:MouseEvent):void {<br />			fr.browse();<br />        }<br />	}<br />}

O componente funciona da seguinte forma: Ao clicar sobre o botão, abrirá a janela para escolher qual arquivo será carregado para o servidor. Após escolhido o arquivo e clicado em Abrir, o Adobe Flex enviará o arquivo via POST para o ASP.NET, e o mesmo gravará o arquivo no disco do servidor.

Ainda no Adobe Flex, é preciso colocar o botão na tela, para tanto utilize o código abaixo:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” xmlns:im=”br.com.igormusardo.component.*”>
<im:uploadButton x=”10″ y=”10″ id=”btUp” label=”Upload Arquivo”/>
</mx:Application>

Agora que encerramos a programação no Adobe Flex, precisamos ir para o .NET. Com Visual Studio aberto crie um novo Website, neste Website crie um arquivo do tipo Manipulador Genérico chamado de uploadFile.ashx, como na figura.

No arquivo uploadFile.ashx copie o código abaixo.

<%@ WebHandler Language="C#" Class="uploadFile" %><br /><br />using System.IO;<br />using System.Web;<br />using System.Web.Configuration;<br /><br />public class uploadFile : IHttpHandler<br />{<br />    public void ProcessRequest(HttpContext _context)<br />    {<br />        string uploadDir = HttpContext.Current.Server.MapPath("~/upload/");<br /><br />        if (_context.Request.Files.Count == 0)<br />        {<br />            _context.Response.Write("<result><status>Error</status><message>No files selected</message></result>");<br />            return;<br />        }<br /><br />        foreach (string fileKey in _context.Request.Files)<br />        {<br />            HttpPostedFile file = _context.Request.Files[fileKey];<br />            file.SaveAs(Path.Combine(uploadDir, file.FileName));<br />        }<br /><br />        _context.Response.Write("<result><status>Success</status><message>Upload completed</message></result>");<br /><br />    }<br /><br />    public bool IsReusable<br />    {<br />        get { return true; }<br />    }<br />}

Crie a pasta upload, onde os arquivos serão salvos pelo ASP.NET, dentro do Website e conceda permissões de leitura e escrita para o usuário IUSR_<>.