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
{
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.ProgressEvent;
	import flash.net.FileReference;
	import flash.net.URLRequest;
	import flash.net.URLRequestMethod;

	import mx.containers.TitleWindow;
	import mx.controls.Button;
	import mx.controls.ProgressBar;
	import mx.core.Application;
	import mx.managers.PopUpManager;

	public class uploadButton extends Button
	{
		/**
		* Define qual o arquivo .NET será chamado para realizar o upload físico do arquivo
		*/
		private const UPLOAD_URL:String = "uploadFile.ashx";

		private var fr:FileReference;
		private var pb:ProgressBar = new ProgressBar();
		private var tw:TitleWindow;

		/**
		* Inicializa o FileReference e adiciona os EventListeners 
		*/
		public function uploadButton():void {
		    fr = new FileReference();
		    fr.addEventListener(Event.SELECT, selectHandler);
		    fr.addEventListener(Event.OPEN, openHandler);
		    fr.addEventListener(ProgressEvent.PROGRESS, progressHandler);
		    fr.addEventListener(Event.COMPLETE, completeHandler);
		}

		/**
		* Prepara o label da barra de progressão para informar o % de envio do arquivo
		*/
		private function openHandler(event:Event):void {
		    pb.label = "Uploading %3%%";
		}

		/**
		* Atualiza o percentual concluído.
		*/
		private function progressHandler(event:ProgressEvent):void {
		    pb.setProgress(event.bytesLoaded, event.bytesTotal);
		}

		/**
		 * Após o upload completo, é alterado o label da barra de progressão, informando ao usuário o fim da operação 
		 */
		private function completeHandler(event:Event):void {
		    pb.label = "Upload Complete";
		    PopUpManager.removePopUp(tw);
		}

		/**
		 * Após o arquivo selecionado o upload é executado. 
		 */
		private function selectHandler(event:Event):void {
		    var request:URLRequest = new URLRequest();
		    request.url = UPLOAD_URL;
		    request.method = URLRequestMethod.POST;
		    openWindow()
		    fr.upload(request);
		}

		/**
		 * Abre popUp com a progressBar. 
		 */
		private function openWindow():void{
			tw = new TitleWindow();
			tw.title = "Uploading File";
			tw.width= 250;
			tw.height= 80;
			pb.percentHeight = 100;
			pb.percentWidth = 100;
			tw.addChild(pb); 
			PopUpManager.addPopUp(tw, this, true);
			tw.x = (Application.application.width - tw.width) / 2; 
			tw.y = (Application.application.height - tw.height) / 2;
		}		

		/**
		* Abre a janela para escolher o arquivo a ser feito o upload.
		*/					
		override protected function clickHandler(event:MouseEvent):void {
			fr.browse();
        }
	}
}

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" %>

using System.IO;
using System.Web;
using System.Web.Configuration;

public class uploadFile : IHttpHandler
{
    public void ProcessRequest(HttpContext _context)
    {
        string uploadDir = HttpContext.Current.Server.MapPath("~/upload/");

        if (_context.Request.Files.Count == 0)
        {
            _context.Response.Write("<result><status>Error</status><message>No files selected</message></result>");
            return;
        }

        foreach (string fileKey in _context.Request.Files)
        {
            HttpPostedFile file = _context.Request.Files[fileKey];
            file.SaveAs(Path.Combine(uploadDir, file.FileName));
        }

        _context.Response.Write("<result><status>Success</status><message>Upload completed</message></result>");

    }

    public bool IsReusable
    {
        get { return true; }
    }
}

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_<>.