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.


Manipulador Genérico

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


Permissão

Compile sua aplicação do Adobe Flex e copie os arquivos compilados para a pasta do Website ASP.NET.

Pronto!

Execute o Website e abra a página FlexUpload.html e faça o upload dos arquivos quiser.


Upload


Browse Window


Uploading

Faça o download do código-fonte.

Divirta-se!


Posts similares
  1. Construindo aplicações ricas de internet com Adobe Flex 3 e ASP.NET
  2. Maratona de treinamento On-Line sobre Adobe Flex
  3. Adobe Flex - Exportar Datagrid para Excel
  4. Adobe Max 2008: Visual Studio, Flex e AMF
  5. WebCast - Integrando ASP.NET + Adobe Flex com WebOrb
  6. Artigo - Construindo aplicações ricas com Adobe Flex 3 e ASP.NET na revista Mundo .NET
  7. WebOrb 3.6 para .NET está disponível
  8. Decisões corretas através de dashboards dinâmicos em Flex e ASP.NET MVC
  9. Adobe Flex - Combobox de múltipla de seleção
  10. Utilize o botão direito do mouse em suas aplicações Adobe Flex