Tutorial de SWFUpload, uploads via web utilizando Macromedia Flash

DISCLAIMER

Lo que sigue a continuación roza peligrosamente el concepto de ladrillo, si no te interesa el desarrollo web en general, y las soluciones de upload en particular, para de leer inmediatamente. Avisado quedas.

ABSTRACT

SWFUpload es una pequeña aplicación Flash controlable via Javascript que nos permite realizar uploads de ficheros en nuestros formularios web.

DEMO Y DESCARGA

En la propia web del programa: http://labb.dev.mammon.se/swfupload/

Demo de mi propia (y minimalista… y sucia…) implementación: http://www.propiedadprivada.com/lab/swfupload/

TUTORIAL: CARACTERÃ?STICAS

Contra el tradicional input file o sus múltiples implementaciones en Java, SWFUpload nos ofrece varias ventajas importantes:

• Permite limitar los tipos de archivo a subir (p.e. *.jpg,*.gif)
• Permite la subida simultánea de múltiples archivos (Seleccionando en el diálogo con Control/Mayúsculas + Click)
• Permite control de eventos JS programables para inicio, cancelación, progreso y completado del upload
• Permite controlar desde JS información sobre el fichero (como Tamaño, nombre, etc…) antes de iniciar el upload
• Permite dar el estilo que queramos al botón de upload, utilizando imágenes y rollovers
• Permite generar barras de progreso con XHTML y CSS válidos
• Permite informar sobre el estado de la subida sin necesidad de recargar nada en el navegador
• Permite realizar todo esto en todo tipo de combinaciones de sistema operativo/navegador que soporte Flash
• Permite degradar sin problemas en navegadores sin Javascript o Flash

TUTORIAL: CÓMO LO HACEN

Gracias a la nueva clase flash.net.FileReference, podemos gestionar desde Flash el envío (y descarga) de archivos por medio de nuestro objeto Flash. Para ello la mencionada clase abre la caja nativa del sistema operativo para escoger un archivo y luego enviarlo al servidor.

Por medio de la librería SWFObjec, SWFUpload detecta el plugin Flash del cliente, degradando en un formulario HTML normal en caso de no detectarlo, y escribiendo el HTML necesario para embeber un objeto Flash en caso afirmativo.

Este objeto Flash hace uso de la mencionada clase flash.net.FileReference (lo cual impone automáticamente como requerimiento Flash 8) y nos proporciona una «puerta» de acceso desde Javascript a las funciones contenidas en la misma.

Para implementarlo seguiremos estos sencillos pasos….

[html]
Incluimos el archivo de la libreria:

Creamos una capa contenedora para el objeto Flash:

E iniciamos el objeto:

[/html]

Nótese que como destino del objeto Flash indicamos la ID de la capa contenedora antes creada: SWFUpload en este caso. Por su parte, la variable upload_backend indica la url del archivo que va a gestionar dicho upload una vez enviado al servidor por nuestra pequeña aplicación Flash.

Una vez embebido, tan sólo veremos como área pulsable la imagen que hayamos elegido a tal efecto.

TUTORIAL: CÓMO IMPLEMENTARLO

Una vez pulsada la imagen definida para SWFUpload, se nos presentará un cuadro de diálogo para seleccionar archivos, cuadro configurable por medio de una variable (p.e. allowed_filetypes : «*.gif;*.jpg;*.png», ) que definirá los tipos de archivo aceptados.

Según vayamos interactuando con el objeto Flash por medio de Javascript, se irán disparando los eventos que este tiene configurados:

• upload_start_callback : ‘Funcion_JS_que_controla_el_inicio_del_upload’,
• upload_progress_callback : ‘Funcion_JS_que_controla_el_progreso_del_upload’,
• upload_complete_callback : ‘Funcion_JS_que_controla_el_completado_del_upload’,
• upload_error_callback : ‘Funcion_JS_que_controla_los_posibles_errores’,
• upload_cancel_callback : ‘Funcion_JS_que_controla_el_cancelado_de_selección_de_archivo’

Veamos un pequeño ejemplo más «afinado» a nuestro gusto:

[javascript]

[/javascript]

Aparte de lo comentado más arriba, las propiedades se explican sólas. La mayoría son incluso opcionales, pero si queremos algo minimamente personalizado disponemos de varias formas de llamar a Javascript para mostrar la información.

Todos los callbacks realizados desde el objeto Flash devuelven además un objeto imagen, que contiene el nombre del archivo, su tamaño y su extensión, para que podamos jugar con el mismo sin problema. Su apariencia es algo así:

[javascript]
fileObj.name = filename (archivo.png)
fileObj.size = filesize (192912)
fileObj.type = filetype (.png)
[/javascript]

La función upload_progress_callback devuelve además los bytes ya enviados al servidor, para poder seguir su progreso.

Veamos unos ejemplos de uso de las funciones callback:

uploadStart, controlar el momento en que se inicia el Upload
[javascript]
uploadStart = function(fileObj) {
var container = document.getElementById(«fileContainer»);
container.innerHTML += ««;
container.innerHTML += fileObj.name + «, «;
container.innerHTML += fileObj.size + «, «;
container.innerHTML += fileObj.type + «
«;
}
[/javascript]

uploadProgress, controlar el progreso del upload.
[javascript]
uploadProgress = function(fileObj, bytesLoaded) {
var pie = document.getElementById(«progressInfoElm»);
var proc = Math.ceil((bytesLoaded / fileObj.size) * 100);
pie.innerHTML = proc + » %»;
}
[/javascript]

uploadComplete, controlar el momento en que nuestro upload se completa

[javascript]
uploadComplete = function(fileObj) {
document.getElementById(fileObj.name).className = «uploadDone»;
document.getElementById(fileObj.name).innerHTML = objFile.name + » done!»;
}
[/javascript]

uploadError, gestionar posibles errores en el upload. Incluso en esto SWFUpload es rico en información, tanto en el tipo de error como en la descripción del mismo, pasándonos desde códigos de error propios a los típicos de HTTP.

[javascript]
uploadError = function(error,errorFile,errorCode) {
switch(error) {
case -10:
cadena=»Error de HTTP , contacte con el servicio técnico e indíquele este código de error: » + errorCode;
break;
case -20:
cadena=»Error, no se ha especificado fichero de destino»;
break;
case -30:
cadena=»Error de E/S, contacte con el servicio técnico»;
break;
case -40:
cadena=»Error de violación de seguridad, contacte con el servicio técnico»;
break;
}
alert(«Error subiendo el archivo: » + errorFile.name + «\n\n» + cadena);
}
[/javascript]

TUTORIAL: BUGS Y LIMITACIONES

Si estás utilizando Apache con mod_security activado esta solución no funcionará, necesitarás incluir esto en un archivo .htaccess para desactivar el mod_security:

[javascript]
SecFilterEngine Off
SecFilterScanPOST Off
[/javascript]

Cuidado Deshabilitar mod_security no está permitido en la mayoría de los alojamientos compartidos, y aún si está permitido documéntate acerca de las implicaciones que conlleva antes de hacer nada.

Este comportamiento anómalo se debe a un bug en la forma que Flash envía las cabeceras de vuelta al servidor, tal y como se explica en la documentación de Flash 8

AGRADECIMIENTOS Y LICENCIA

Un gran «gracias» a Geoff Stearns pos su SWFObjec, sin el cual este pequeño experimento no habría sido ni la mitad de bueno. Podeis verlo en su web original: http://blog.deconcept.com/swfobject

SWFUpload está protegido por (c) 2006 Lars Huring – Profandesign y Mammon Media y se lanza al público bajo licencia MIT: http://www.opensource.org/licenses/mit-license.php

El que suscribe agradece a Chesterfield y Cafés Candelas el apoyo recibido en la redacción y traducción del presente folleto parroquial.

CONCLUSION

Los que me conocen saben que por lo general aborrezco el Flash por encima de todas las cosas (salvo quizá la política y la prensa del corazón), sin embargo he de reconocer que estamos ante un gran ejemplo de «buen» uso de Flash, cuando éste puede hacer un mejor trabajo que un simple HTML, en vez de usarlo para pintar monas y atormentar nuestros oídos.

Asimismo, en esta época tan «Web 2.0», SWFUpload hace una perfecta demostración de trabajo no intrusivo, sin un requerimiento real del plugin Flash.

Por mi parte, Chapeau.