Upload de archivos con Flex 2
En estos días estoy haciendo un admin para un sitio web, estoy utilizando Flex con PHP y MySQL. Esta herramienta me está simplificando mucho las cosas, lo que antes eram varios xhtmls otros tantos php y si queremos que quede mas usable otros muchos js para hacer un ajax, hoy son solo unas 50 lineas en un mxml y otro poco de código en Actionscript. Trabajando, me topé con un problema, hacer un upload de archivos con Flex, mucha info no encontré en internet, así que me las arreglé bastante solo, aquí comparto el resultado, espero que sirva.
Archivo mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
creationComplete = "init()">
<mx:Script source="subir.as"/>
<mx:Panel title="Subir Imagen"
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
paddingTop="10">
<mx:Form width="100%" height="100%">
<mx:FormItem label="Imagen">
<mx:Text id="file_path"/>
<mx:ProgressBar id="uploadProgress" label="" mode="manual" />
<mx:ControlBar horizontalAlign="right">
<mx:Button id="browseUpload" label="Buscar..." click="buscar()"/>
<mx:Button id="startUpload" label="Upload..." click="subir()" />
</mx:ControlBar>
</mx:FormItem>
</mx:Form>
</mx:Panel>
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
creationComplete = "init()">
<mx:Script source="subir.as"/>
<mx:Panel title="Subir Imagen"
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
paddingTop="10">
<mx:Form width="100%" height="100%">
<mx:FormItem label="Imagen">
<mx:Text id="file_path"/>
<mx:ProgressBar id="uploadProgress" label="" mode="manual" />
<mx:ControlBar horizontalAlign="right">
<mx:Button id="browseUpload" label="Buscar..." click="buscar()"/>
<mx:Button id="startUpload" label="Upload..." click="subir()" />
</mx:ControlBar>
</mx:FormItem>
</mx:Form>
</mx:Panel>
</mx:Application>
Archivo Actionscript:
import flash.net.FileReference;
import flash.net.URLRequest;
import flash.net.URLRequestMethod
private const UPLOAD_URL:String = "upload.php";
private var imagesFilter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");
private var photoShop:FileFilter = new FileFilter("Archivos Photoshop", "*.psd");
private var fileref:FileReference = new FileReference();
private function buscar():void {
fileref.browse([imagesFilter,photoShop]);
}
/**
* cuando se ha seleccionado el archivo coloco el nombre en el text
* y habilito el botón subir
*/
private function seleccionar(event:Event):void {
startUpload.enabled = true;
file_path.text = fileref.name;
}
/**
* subo el archivo
*/
private function subir():void{
var request:URLRequest = new URLRequest();
request.method = URLRequestMethod.GET;
request.url = UPLOAD_URL;
fileref.upload(request);
}
/**
* chequeo el progreso
*/
private function progressHandler(event:ProgressEvent):void {
uploadProgress.setProgress(event.bytesLoaded, event.bytesTotal);
}
private function completeHandler(event:Event):void {
uploadProgress.label = "UPLOAD COMPLETE";
}
/**
* inicializo la applicación
*/
private function init():void{
startUpload.enabled = false;
fileref.addEventListener(Event.SELECT, seleccionar);
fileref.addEventListener(ProgressEvent.PROGRESS, progressHandler);
fileref.addEventListener(Event.COMPLETE, completeHandler);
}
import flash.net.URLRequest;
import flash.net.URLRequestMethod
private const UPLOAD_URL:String = "upload.php";
private var imagesFilter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");
private var photoShop:FileFilter = new FileFilter("Archivos Photoshop", "*.psd");
private var fileref:FileReference = new FileReference();
private function buscar():void {
fileref.browse([imagesFilter,photoShop]);
}
/**
* cuando se ha seleccionado el archivo coloco el nombre en el text
* y habilito el botón subir
*/
private function seleccionar(event:Event):void {
startUpload.enabled = true;
file_path.text = fileref.name;
}
/**
* subo el archivo
*/
private function subir():void{
var request:URLRequest = new URLRequest();
request.method = URLRequestMethod.GET;
request.url = UPLOAD_URL;
fileref.upload(request);
}
/**
* chequeo el progreso
*/
private function progressHandler(event:ProgressEvent):void {
uploadProgress.setProgress(event.bytesLoaded, event.bytesTotal);
}
private function completeHandler(event:Event):void {
uploadProgress.label = "UPLOAD COMPLETE";
}
/**
* inicializo la applicación
*/
private function init():void{
startUpload.enabled = false;
fileref.addEventListener(Event.SELECT, seleccionar);
fileref.addEventListener(ProgressEvent.PROGRESS, progressHandler);
fileref.addEventListener(Event.COMPLETE, completeHandler);
}
on December 8th, 2006 at 11:52 am
Muy bueno el script, y me resulta muy útil en mi caso, pero no lo puedo usar porque me da un error, después de que se termina de llenar la barra de progreso me salta un error con lo siguiente:
Error #2044: IOErrorEvent no controlado: text=Error #2038: Error de E/S de archivo.
at Imagenes$iinit()
at mx.managers::SystemManager/create()
at mx.managers::SystemManager/::initializeTopLevelWindow()
at mx.managers::SystemManager/::frameEndHandler()
¿Alguna idea que puede ser?
on January 22nd, 2007 at 7:35 pm
Hola Cristian,
Yo soy nuevo usando esta herramienta flex 2, y me sale el mismo error. Dentro de tu codigo cuando declaras la constante
private const UPLOAD_URL:String = “upload.php”;
upload.php que es? Es decir que codigo contiene contiene el codigo tradicional para subir archivos?
Saludos
on January 28th, 2007 at 2:48 am
Así es Victor, upload.php es un código tradicional para subir atchivos con php, este puede ser:
$uploadDir = './';
$uploadFile = $uploadDir . $_FILES['Filedata']['name'];
move_uploaded_file($_FILES['Filedata']['tmp_name'], $uploadFile);
?>
Filedata es la variable que contiene la información del archivo, ese nombre (Filedata) es el que está seteado por default en Actionscript.
on February 28th, 2007 at 5:33 pm
[…] Hace un tiempo publiqué un ejemplo de upload con flex, este era bastante básico. Aqui dejo otro ejemplo, pero este hecho componente, es más fácil de utilizar y de reutilizar. Ejemplo Sources […]
on March 5th, 2007 at 12:24 pm
Estimado Cris , felicidades por tu magnifico trabajo…
Me da un error:
Error #2044: IOErrorEvent no controlado: text=Error #2038: Error de E/S de archivo.
at Imagenes$iinit()
at mx.managers::SystemManager/create()
at mx.managers::SystemManager/::initializeTopLevelWindow()
at mx.managers::SystemManager/::frameEndHandler()
Has usado algún comunicador weborb o amfphp ??? Si eres tan amable de resolver mi problema con tu script te estaria enormemente agradecido ….
Muchas gracias y fenomenal trabajo…
on March 5th, 2007 at 12:41 pm
Yvan,
Gracias por tu comentario, este script utiliza un php básico, que está en un comentario que he puesto mas arriba, igualmente hace poco tiempo publiqué un componente para realizar uploads con Flex de ahi te puedes bajar todo, incluso el php que he utilizado. Es una versión mucho más mejorada de esta upload
Saludos!
on March 13th, 2007 at 3:49 pm
Pero cuál es la respuesta al error#2038 ???
on March 16th, 2007 at 9:02 am
Les comento que me han dejado un mensaje en mi sitio web que les puede servir:
Referente al FileUpload que has publicado en Flex, he visto que hay gente a la que le da error el componente.:
Error #2044: IOErrorEvent no controlado: text=Error #2038: Error de E/S de archivo
Yo también tuve ese problema y te comento la solución por si quieres postearla
El problema se encuentra en la configuración de mod_security del Apache que bloquea el acceso del archivo temporal creado en el servidor al script \’upload.php\’. Así que si tienen acceso a la configuración del Apache tienen que configurar este módulo para que permita este tipo de upload.Si no tienes acceso al servidor apache porque usas un servidor externo espero que te den tan buen soporte como me lo dieron a mi.
(David)
on March 18th, 2007 at 11:37 am
Que bueno , COOL !!!
on May 8th, 2007 at 7:14 am
Hola, quisiera saber que se debe cambiar en el codigo para poder guardar con otro nombre el archivo que se sube.
on May 20th, 2007 at 4:40 pm
Necesito lo mismo pero con el upload.php pero en .NET.
(upload.aspx)
Podrian ayudarme???
on May 20th, 2007 at 5:52 pm
Antonio:
El nombre del archivo lo podés pasar como parámetro desde el Flex utilizando URLVariables
LOKI: La parte de Flex sería igual, solo que apuntando a algún archivo de .NET, y luego el script del upload en .NET lo podés sacar de cualquier lado
Saludos!
on May 21st, 2007 at 12:05 am
Coloco el codigo .NET para subir archivos al servidor:
FLEX:
Metodo que gatilla el upload.
public function selectHandler(event:Event):void
{
//mx.controls.Alert.show(fileRef.name,’fileRef.name’);
var request:URLRequest = new URLRequest(”http://localhost/Admision/Default.aspx”);
request.method = URLRequestMethod.POST;
var variables:URLVariables = new URLVariables();
variables.usuario = “LOKI”;
request.data = variables;
try
{
fileRef.upload(request);
textarea1.text = “Enviando ” + fileRef.name + “…”;
}
catch (error:Error)
{
mx.controls.Alert.show(’No se puede Enviar el Archivo’,'Error’);
}
}
En .NET:
protected void Page_Load(object sender, EventArgs e)
{
string uploadFolder = “upload”;
HttpFileCollection files = Request.Files;
if (files.Count == 0)
{
Response.Write(”No se encontraron Archivos”);
Response.End();
}
string path = Server.MapPath(uploadFolder);
HttpPostedFile file = files[0];
if (file != null && file.ContentLength > 0)
{
string archivo = Request.Form[”fileName”];
string usuario = Request.Form[”usuario”];
string extension = (archivo.EndsWith(”.jpg”)) ? “.jpg” : “.gif”;
if ((archivo.EndsWith(”.jpg”)) || (archivo.EndsWith(”.gif”)))
{
string savePath = path + “/” + usuario + extension;
file.SaveAs(savePath);
}
}
}
Con esto ademas de hacer un upload con .NET se ve que se puede cambiar el nombre al archivo.
De antemano.
Gracias Cristian.
on August 27th, 2007 at 1:32 pm
Muchisimas gracias Cristian, era exactammente lo que estaba buscando, yo tambien soy nuevo en esto de FLEX, y lo pude implementar muy bien.
on August 31st, 2007 at 3:09 pm
HOLA QUE TAL CRISTIAN SABES ME HE METIDO AL DESARROLLO DE APLICACIONES FLEX EN CONJUNCION CON PHP Y MYSQL PERO HE TENIDO UN PROBLEMA MIRA HASAT AHORA YA LOGRE CONECTAR E HICE QUE UNA APLICACION FLEZ PASARA DATOS A PHP PARA QUE ESTE MISMO LOS METIERA EN BASE DE DATOS Y LO HACE BASTANTE BIEN, EL PROBLEMA ES CUANDO QUIERO OBTENER ESOS DATOS DE MYSQL POR MEDIO DE PHP Y DE PHP A FLEX NO HE PODIDO NO ME HA JALADO, TAL VEZ PODRIAS AYUDARME A DECIFRAR ESTE ENGORROSO CAMINO
MUCHAS GRACIAS POR TU ATENCION , ESPERO QUE ESTES BIEN Y OJALA PUEDAS AYUDARME GRACIAS
on September 5th, 2007 at 9:12 pm
hola Yoh:
Hay varias formas de obtener datos desde un php con Flex, eso es según tu preferencia.
Lo primero que usé, y lo que me pareció mas simple fue HTTPService acá hay un ejemplo de su uso con XML pero le podés pasar parámetos a ese XML y armarlo con PHP. Te recomiendo que consultes en la ayuda de Flex sobre este objeto.