Comunidad de diseño web y desarrollo en internet online

Subir archivos en Flash con FileReference

flash.net.FileReference

Pare ver este ejemplo necesitas Flash Player 8, puedes descargarlo en: http://www.macromedia.com/go/getflashplaye por supuesto, tambien necesitas Flash 8.

Introducción

Como todos sabemos la nueva versión de Macromedia Flash ya esta disponible para todo el mundo. En estos primeros días he estado metido viendo todo lo nuevo que ofrece.

En este tutorial vamos a centrarnos en la clase flash.net.FileReference, con esta clase ahora es posible subir y descargar archivos locales mediante el FlashPlayer, cosa que hasta el FlashPlayer 7 era imposible, a menos que hiciéramos un puente Flash + Javascript + Flash que no siempre daba buenos resultados sobre todo con el IE de la Mac.

La clase flash.net.FileReference lo que hace en términos sencillos es: Abrir la caja nativa del sistema operativo para poder escoger un archivo para enviarlo al servidor y/o Abrir la caja nativa del sistema operativo para escoger en donde guardar un archivo desde el servidor.

Propiedades

Propiedad Descripción
creationDate:Date La fecha de creación del archivo en el disco duro
creator:String El creador de archivos para Macintosh Disponible solo para Macintosh
modificationDate:Date La fecha de cuando el archivo fue modificado por ultima vez
name:String El nombre del archivo
Size:Number El tamaño del archivo, en bytes
type:String El tipo de Archivo

Ejemplo

creator => undefined

creationDate => Tue Jul 5 10:43:18 GMT-0500 2005

modificationDate => Tue Jul 5 10:43:19 GMT-0500 2005

size => 76018

type => .png

name => tasks.png

Eventos

Evento Descripción Parámetros
onCancel Se invoca cuando el usuario hace clic en el botón cancel de la caja de dialogo File:FileReference
onComplete Se invoca cuando la transferencia del archivo termina, ya sea cuando se sube o se descarga File:FileReference
onHTTPError Se invoca cuando ocurre un error de http File:FileReference
httpError:Number
onIOError Se invoca cuando ocurre un error input/output ocurre File:FileReference
onOpen Se invoca cuando la transferencia del archive comienza, ya sea cuando de sube o se descarga File:FileReference
onProgress Se invoca cada determinado tiempo hasta que la transferencia del archivo termina, ya sea cuando se sube o se descarga File:FileReference
bytesLoaded:Number
bytesTotal:Number
onSecurityError Se invoca cuando la transferencia del archive falla por rezones de seguridad File:FileReference
errorString:String
onSelect Se invoca cuando el usuario escogió el archivo desde la caja de dialogo. File:FileReference

Métodos

Evento Descripción
addListener(listener:Object) : Void Registra un objeto para recibir una notificación cuando un evento es invocado
browse([typelist:Array]) : Boolean Lanza la caja de dialogo para escoger un archivo
cancel() : Void Cancela la operación de subir o descargar archivos
download(url:String, [defaultFileName:String]) : Boolean Lanza la caja de dialogo donde el usuario escoge donde guardar el archivo que descargara del servidor
removeListener(listener:Object) : Boolean Remueve el objeto de la lista de objetos que reciben los eventos de notificación
upload(url:String) : Boolean Comienza la transferencia del archivo seleccionado hacia el servidor

Ejemplo

Bien esta es la parte técnica que se puede encontrar en la ayuda de Flash.

Ahora vamos con un ejemplo práctico.

Lo que vamos a hacer es una interfaz en la cual se podrán subir archivos a un servidor remoto, mostrando la lista de archivos que se encuentran en dicho servidor y poder descargarlos. Usando obviamente la clase flash.net.FileReference

Para ello haremos uso de los componentes de Flash, Button y DataGrid, además de un Movieclip que contenga una barra y un campo de texto dinámico.

Donde:

Nombre de instancia DataGrid = data_mc

Boton Upload = upload_btn

Boton Download = down_btn

MovieClip = load_mc

Barra de porcentaje = barra_mc

Campo de texto dinamico = label_txt

alt

Seteando Variables

Una vez que tengamos esta estructura con los nombres de instancia, vamos a programar.

Lo primero que haremos es:

//Importar la clase flash.net.FileReference
import flash.net.FileReference;

//Hacer una instancia de dicha clase
var fileUpload:FileReference = new FileReference();

//Seteamos el path donde estarán nuestros archivos y donde subiremos las imágenes
var path:String = "http://www.klr20mg.com/uploadDir"  

//Crear el objeto que será nuestro listener para los eventos de la instancia de flash.net.FileReference
var escucha:Object = {};  

//Crear un array donde indicaremos que tipo de archivos podrá subir el usuario.
var fileTypes:Array;  

/*Una variable donde se guardara el nombre del archivo,
que cambiara dependiendo si el usuario escoge un ítem del DataGrid.*
/
var getFile:String;

funcion init

function init() {  	
//Declaramos que daremos acceso a nuestro servidor para hacer la transferencia
//esto no es necesario para que la aplicación funcione, pero es recomendable
//System.security.allowDomain(path);


//Ocultamos el clip que servirá como indicador de transferencia
load_mc._visible = false;

//Poblamos el array en el cual indicaremos el mensaje que mostrara la caja de dialogo en el
//apartado tipo de Archivo, así como, a que tipo de archivos se podrá acceder, extensión,
//hace referencia a los archivos de PC y macType hace referencia a los archivos de Mac

fileTypes = [{description:"Archivos de Imagen", extension:"*.jpg;*.gif;*jpeg;*.png", macType:"JPEG;jp2_;GIFF"}];
//Asignamos que texto mostraran los botones
upload_btn.label = "Upload File";
down_btn.label = "Download File";

//Asignamos las funciones que se ejecutaran al hacer clic en los botones
upload_btn.addEventListener("click", doUpload);
down_btn.addEventListener("click", doDownload);

//fileUpload Listener
//Asignamos el objeto a la instancia de la clase FileReference, que servirá como listener
//de los eventos de esta misma.

fileUpload.addListener(escucha);

//En este ejemplo solo ocuparemos 4 de los 8 eventos disponibles en la clase FileReference
//onSelect, onClomplete, onCancel y onProgress. Asignando una funcion por cada evento

escucha.onSelect = doSelect;
escucha.onComplete = doComplete;
escucha.onCancel = doCancel;
escucha.onProgress = doProgress;

//Asignamos la funcion setDownload al evento change del componente dataGrid
data_mc.addEventListener("change", setDownload);

//Ejecutamos la funcion makeList
makeList();
}

funciones de eventos FileReference

Las primeras funciones que haremos serán aquellas que se asignaron para los eventos de la clase FileReference

doComplete

La funcion doComplete sera invocada cuando la transferencia del archivo se ha completado tanto para subir como para descargar archivos.

En este ejemplo la funcion doComplete esconde la barra de porcentaje, muestra el texto “Transferencia Completa” e invoca a la funcion makeList, para que el archivo recién subido este visible en la lista.

function doComplete() {	
load_mc.barra_mc._xscale = 0;
load_mc.label_txt.text = "Tranferencia Completa"; makeList();
}

doProgress

La funcion doProgress recibe 3 parámetros las propiedades del archivo, los bytesTransferidos y el tamaño total del archivo, en Bytes. con esta información y una simple regla de 3 podremos sacar el porcentaje de la transferencia.

Asignando el porcentaje a la propiedad xscale de nuestra barra y mostrando el porcentaje en texto así como el nombre del archivo en cuestión.

function doProgress(archivo:FileReference, bLoaded:Number, bTotal:Number) {
var porcentaje = Math.round((bLoaded*100)/bTotal);
load_mc.label_txt.text = porcentaje+"% del archivo "+archivo.name;
load_mc.barra_mc._xscale = porcentaje;
}

doCancel

La funcion doCancel es invocada cuando el usuario da clic en el botón cancelar de la caja de dialogo, esta acción cierra dicha caja. En este ejemplo esta funcion solo arroja un texto en la ventana de debug de Flash, ya que el evento no amerita mayor cosa.

function doCancel() { 
trace("El Usuario Cancelo");
}

doSelect

Cuando el usuario escoge un archivo de la caja de dialogo, la funcion doSelect es invocada. Cuando el usuario a escogido el archivo podremos invocar el método upload de la funcion FileReference que se encargara de enviar el archivo al script que se desee.

En este caso el script se llama uploadFile.php que se encargara de tomar el archivo y copiarlo en algún lugar de nuestro servidor

function doSelect(archivo:FileReference) {  
load_mc._visible = true;
load_mc.barra_mc._xscale = 0;
fileUpload.upload(path+"/uploadFile.php");
}

Funciones de Botones

Funciones que se invocaran al dar clic en nuestros botones de la aplicación

doDownload

Esta funcion es invocada al dar clic en el botón Download Si el usuario a escogido un archivo del dataGrid se invoca el método download de la clase FileReference enviado como parámetro el archivo que se descargara, inmediatamente se abrirá la caja de dialogo para escoger la ruta donde queramos guardar dicho archivo

function doDownload() {  	
if (getFile != undefined) {
fileUpload.download(path+"/"+getFile);
}
}

doUpload

La funcion doUpload es invocada al dar clic en el botón Upload Se invoca al método browse de la clase FileReference, que abrirá la caja de dialogo para escoger que archivo se desea subir al servidor, una vez que el usuario escoge el archivo se invoca automáticamente al evento onSelect de la misma clase

function doUpload(event) {  
fileUpload.browse(fileTypes);
}

setDownload

Esta funcion solo setea el nombre del archivo cuando se escoge un item del dataGrid

function setDownload(c:MovieClip) { 
getFile = c.target.selectedItem.Nombre;
}

makeList

La funcion makeList, invoca a un script PHP que se encarga de recorrer el directorio donde están las imágenes que se han subido al servidor, regresando un XML con la información cuando se recibe esta información, se pobla el dataGrid

function makeList() {  
data_mc.removeAll();
var list_xml:XML = new XML();
list_xml.ignoreWhite = true;
list_xml.load(path+"/lista.php");
list_xml.onLoad = function() {
var nodos = this.firstChild.childNodes;
for (var a in nodos) {
var size:Number = Math.ceil((nodos[a].attributes.tamanio/1024));
data_mc.addItem({Nombre:nodos[a].attributes.name, Tamaño:size+" Kb"});
}
};
}

Por último se invoca a la funcion init.

init();

Codigo completo ActionScript

import flash.net.FileReference;  
var fileUpload:FileReference = new FileReference();
var path:String = "http://www.klr20mg.com/uploadDir"
var escucha:Object = {};
var fileTypes:Array;
var getFile:String; function init() {
System.security.allowDomain(path);
load_mc._visible = false;
fileTypes = [{description:"Archivos de Imagen", extension:"*.jpg;*.gif;*jpeg;*.png", macType:"JPEG;jp2_;GIFF"}];
upload_btn.label = "Upload File";
down_btn.label = "Download File";
upload_btn.addEventListener("click", doUpload);
down_btn.addEventListener("click", doDownload);
fileUpload.addListener(escucha);
escucha.onSelect = doSelect;
escucha.onComplete = doComplete;
escucha.onCancel = doCancel;
escucha.onProgress = doProgress;
data_mc.addEventListener("change", setDownload);
makeList();
}
function doComplete() {
load_mc.barra_mc._xscale = 0;
load_mc.label_txt.text = "Tranferencia Completa";
makeList();
}
function doProgress(archivo:FileReference, bLoaded:Number, bTotal:Number) {
var porcentaje = Math.round((bLoaded*100)/bTotal);
load_mc.label_txt.text = porcentaje+"% del archivo "+archivo.name;
load_mc.barra_mc._xscale = porcentaje;
}
function doCancel() {
trace("El Usuario Cancelo");
}
function doSelect(archivo:FileReference) {
load_mc._visible = true;
load_mc.barra_mc._xscale = 0;
fileUpload.upload(path+"/uploadFile.php");
}
function doDownload() {
if (getFile != undefined) {
fileUpload.download(path+"/"+getFile);
}
}
function doUpload(event) {
fileUpload.browse(fileTypes);
}
function setDownload(c:MovieClip) {
getFile = c.target.selectedItem.Nombre;
}
function makeList() {
data_mc.removeAll();
var list_xml:XML = new XML();
list_xml.ignoreWhite = true;
list_xml.load(path+"/lista.php");
list_xml.onLoad = function() {
var nodos = this.firstChild.childNodes;
for (var a in nodos) {
var size:Number = Math.ceil((nodos[a].attributes.tamanio/1024));
data_mc.addItem({Nombre:nodos[a].attributes.name, Tamaño:size+" Kb"});
}
};
}
init();

Scripts PHP

uploadFile.php

El método upload de la clase FileReference, envía el archivo como un formulario cualquiera. El nombre de la variable que contiene la información del archivo esta seteada por default como Filedata. Entonces lo único que tenemos que hacer es tomar dicha variable y hacer el procedimiento normal para copiar el archivo a un directorio de nuestro servidor.

<?php  
$uploadDir = './';
$uploadFile = $uploadDir . $_FILES['Filedata']['name'];
move_uploaded_file($_FILES['Filedata']['tmp_name'], $uploadFile);
?>

list.php

El Script list.php se encarga de recorrer el directorio donde esta alojado, y lo recorre para imprimir un XML con la información de los archivos disponible, esto es para llenar el DataGrid de Flash.

Lo unico comentable de este script es que tengo un array donde pongo que archivos no imprimira el script, en este caso lista.php y uploadFile.php

<?php  
$No=array(".","..","lista.php","uploadFile.php");
$fp=opendir(".");
echo "<?xml version='1.0' ?".">";
echo "<files>";
while (false!==($file=readdir($fp))){
if ((!in_array($file,$No))&&(is_readable($file))){
echo "<file name='".utf8_encode($file)."' tamanio='".filesize($file)."' />";
}
}
closedir($fp);
echo "</files>";
?>

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate