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
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.
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?
Inicia sesión
¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?
Registrate