como subir imagenes al servidor en Flex

441 views
Skip to first unread message

Rafael Berral

unread,
Sep 18, 2012, 3:30:10 PM9/18/12
to madei...@googlegroups.com
Buenas a todos,

estoy haciendo una pequeña aplicacion (la parte del servidor en Java y la parte del cliente en Flex) y me ha surgido un problema.

Quiero hacer una pagina en la que poder subir imagenes al servidor, pero no sé hacerlo (tengo usuarios, y quiero que puedan subir fotos para despues verlas en su galeria de imagenes).

He estado mirando por internet y he encontrado algo de info sobre FileReference o incluso AMFPHP, pero esta info está para php y yo uso Java (he intendado adaptarla pero no ha funcionado).

En conclusion, lo que necesito saber es como guardar la imagen que seleccione el usuario en una carpeta contenida dentro del proyecto (que esta subido al servidor Tomcat), y para ello necesito saber la ruta donde se encuentra la imagen y "copiarla" en la carpeta del servidor. Una vez que tenga eso, utilizaria RemoteObject para comuncarme con Java (esto si se hacerlo, :D) y darlo de alta en la BBDD (guardaria tanto la ruta como el nombre de la imagen).

Muchas gracias por todo!

Guillermo Moreno

unread,
Sep 19, 2012, 2:22:56 AM9/19/12
to madei...@googlegroups.com
Buenas,

Acabo de terminar un componente en mi aplicación justamente para eso, para subir documentos, imágenes, vídeos, etc a un servidor.

Directamente desde flex no se puede hacer por restricciones de seguridad del pluggin de flash, tienes que utilizar 'algo' intermedio, sea php o aspx, en mi caso utilizamos aspx. Desde la parte flex utilizamos la clase FileReference para subir el fichero a esta aspx. Te pongo en el código para ver si te vale de ayuda, no te puedo poner el codigo aspx porque no lo hize yo pero de php por ejemplo si he visto cosas por internet:

En este caso contreto utilizaba FileReferenceList para poder subir varios ficheros a la vez:


<code>
[..]
fileref.addEventListener(Event.SELECT, doSelect);

/* Cuando pinchamos en el boton de buscar archivos */
fileref.browse();

public function doSelect(event:Event):void {

for each (var file:FileReference in fileref.fileList)
 {

    file.addEventListener(ProgressEvent.PROGRESS, progressHandler);  /* Si quieremos poner una barra de progresos con este manejador la vamos pintando */
    file.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, doEndUpload);  /* Cuando finaliza la subida y nos viene la respuesta del servidor */
    file.addEventListener(IOErrorEvent.IO_ERROR,doIOError); /* Error de I/O */
    file.addEventListener(Event.OPEN,doStart); /* Cuando empezamos la subida */

   /* Estas variables son las que se pasaran como parámetros a la página aspx, p.ej.: variables.nombreCliente = 'pepe' */
     var variables:URLVariables = new URLVariables();
     var request:URLRequest = new URLRequest();
     request.method = URLRequestMethod.POST;
     request.data = variables;
     request.url = 'servidordev.ejemplo.com'
     file.upload(request);
}
</code>


Espero que te haya servido de ayuda.


--
Has recibido este mensaje porque estás suscrito al grupo "madeinflex" de Grupos de Google.
Para ver este debate en la Web, visita https://groups.google.com/d/msg/madeinflex/-/33OSnjkQXiIJ.
Para publicar una entrada en este grupo, envía un correo electrónico a madei...@googlegroups.com.
Para anular tu suscripción a este grupo, envía un correo electrónico a madeinflex+...@googlegroups.com
Para tener acceso a más opciones, visita el grupo en http://groups.google.com/group/madeinflex?hl=es.

Rafael Berral

unread,
Sep 19, 2012, 7:16:26 AM9/19/12
to madei...@googlegroups.com
Gracias por la respuesta.

He hecho una mezcla entre el tuyo y el que tenia hecho en un principio. Despues, he hecho un fichero .php para subir el archivo, pero sigo sin poder subir las fotos...no se si el fallo está en la ruta que le pongo del servidor, o que guardo en archivo .php en un sitio que no lo encuentra (aparentemente he hecho un metodo para mostrar el archivo si todo va bien y lo abre, señal de que lo ha encontrado bien) :S.
A continuacion os pongo tanto el componente MXML como el archivo .PHP a ver si me podeis echar una mano:

Componente MXML:

<code>
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx" width="1280" height="800" name="mensajes"
         creationComplete="init()">
   
   
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.Image;
           
            public var nombreArchivo:String;
            //declaramos la variables que nos servirá para subir los archivos
            private var fileref:FileReference = new FileReference();
            //Declaramos la variable que contendrá las variables que pasaremos por POST al php
            private var variables:URLVariables=new URLVariables;
           
            private var Myfilter = new FileFilter("Imagenes (*.jpg; *.jpeg; *.png; *.gif;)","*.jpg; *.jpeg; *.png; *.gif");
           
            // init() la ejecutamos nada mas cargar la pagina y lo que hace es crear lo listener para cada evento de la subida
            private function init():void{
            startUpload.enabled = false;
            fileref.addEventListener(Event.SELECT, seleccionar);
            fileref.addEventListener(ProgressEvent.PROGRESS, progressHandler);
            fileref.addEventListener(Event.COMPLETE, completeHandler);
            //Alert.show(suscripcion.text.toString()+archivoAntiguo.text.toString());
            }
             
            //muestra el archivo "subir.php", para saber si lo ha encontrado bien y si todo ha iido bien
            private function callbackFunction ( e:DataEvent ):void{
            //file_path.text=e.data.toString();

           
            file_path.text="Fotografía subida con éxito";
           
            //campoTexto.text=e.data.toString();
            }
            private function seleccionar(event:Event):void {
            startUpload.enabled = true;
            file_path.text = fileref.name;
           
            }
            //aqui vamos indicando en la barra de progreso el porcentaje de subida
            private function progressHandler(event:ProgressEvent):void {
            uploadProgress.setProgress(event.bytesLoaded, event.bytesTotal);
            }
           
            private function completeHandler(event:Event):void {
            //en esta ocasión no queremos que haga nada cuando se cargue la foto
            }
           
            private function subir():void{
            //esta funcion se ejecuta cuando pinchamos en el boton subir y se encarga de mandar el archivo a subir.php que lo colocará en nuestro servidor
            var request:URLRequest = new URLRequest();
            nombreArchivo=fileref.name.toString();
            variables.nombreArchivo=nombreArchivo;   
            variables.apellidos ='apelidosPrueba';
            request.method = URLRequestMethod.POST;
            request.url ="subir.php";
            request.data=variables;
            fileref.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, callbackFunction);
            fileref.upload(request);
            }
           
            private function buscar():void {
            //busca la imagen
            fileref.browse([Myfilter]);
            }
            ]]>
    </fx:Script>   
   
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Panel id="panelCentral" width="1279" height="686" textAlign="left">
        <mx:ProgressBar id="uploadProgress" mode="manual"  x="219.2" y="125" width="354"/>
        <mx:Text id="file_path" x="309.2" y="97" width="354"/>
        <mx:Button styleName="boton" x="36.8" y="60" label="Insertar Fotografía:"  width="174.4"  click="buscar()"/>
        <mx:Button id="startUpload" label="Subir" click="subir()"  x="219.2" y="92" styleName="boton" width="82.4"/>
    </s:Panel>
</mx:HBox>


</code>

Ahora os pongo el codigo del archivo "subir.php":
<code>

<?php
//si llegan datos y el tamaño de los datos es menor que un mega
if($_FILES['Filedata'] and $_FILES['Filedata']['size']<1000000){
        //recogemos las variables que nos lelgan por POST
        $nombre=$_POST['nombreArchivo'];
    //añadimos time() para que el nombre del archivo sea unico
                $apellido=$_POST['apellidos'].time();       
        //lo colocamos en el directorio
        $uploadFile ="C:\xampp\tomcat\webapps\pfc1\pfcFLEX-debug\images".$nombre2;
                //subimos el archivo
        move_uploaded_file($_FILES['Filedata']['tmp_name'],$uploadFile);
        //echo $nombre2;// "Foto almacenada";
    }
?>

</code>

Este archivo (subir.php) lo pongo en la carpeta del proyecto (el proyecto se llama pfc1), dentro del servidor en C:\xampp\tomcat\webapps\pfc1\pfcFLEX-debug\, que es donde estan todos los archivos.
Las fotos las quiero guardar en C:\xampp\tomcat\webapps\pfc1\pfcFLEX-debug\images.

Un saludo y gracias por anticipado.

Rafael Berral

unread,
Sep 19, 2012, 8:26:05 AM9/19/12
to madei...@googlegroups.com
Se me ha olivado preguntar un par de cosillas en el anterior email:
Hay que hacer algun tipo de configuracion para que pueda leer correctamente el fichero .php?
Mi proyecto lo tengo configurado con BlazeDS, asi que no sé si habria que modificar algun parametro en la configuración de éste para que ejecutara el .php sin problemas.
Sabeis si, pasando la ruta del fichero a un remote Object de Java, se puede guardar la imagen?

Gracias por todo.

Francisco Rodríguez

unread,
Sep 20, 2012, 3:18:40 AM9/20/12
to madei...@googlegroups.com
Hola, lo que quieres hacer es mucho mas fácil que todo eso.

Solo tienes que coger el código que te pasaron previamente e implementar un servlet o jsp que trate dicha petición POST, exactamente como harías para subir un fichero vía HTML de toda la vida.

Por tanto no necesitas php para nada ni ningún otro invento adicional ya que como sabes con Java puedes implementar una respuesta a un POST ya sea de formulario ya sea de file upload.

Cabe destacar igualmente que aunque desde el cliente hagas un file upload múltiple, tu parte servidora trata UN fichero a la vez. Tu cliente se encargará de crear una conexión con servidor para cada fichero a subir.

Espero haber despejado tus dudas.

Un saludo.
Para ver este debate en la Web, visita https://groups.google.com/d/msg/madeinflex/-/K3O0ZsfKk5gJ.

Rafael Berral

unread,
Sep 21, 2012, 9:08:16 AM9/21/12
to madei...@googlegroups.com
Buenas de nuevo,

gracias por la información.

Ahora el problema es que, segun tengo configurado mi proyecto con BlazeDS, no puedo crear ningun servlet. Todo viene por el web.xml que viene en el proyecto de BlazeDS. Este es el error que me aparece al intentar crear un Servlet en mi proyecto con BlazeDS:

Web application version is unsupported. Upgrade web.xml to version 2.4 or newer or use previous version of NetBeans.

Mientras tanto, he creado otro proyecto web, sin BlazeDs, y éste si me deja crear el servlet sin problemas, que ya esta probado y funciona.
Me he fijado en los web.xml tanto del proyecto BlazeDS como del proyecto web creado posteriormente, y cambia la cabecera, en concreto, os pongo las dos cabeceras para que lo veais:
CABECERA WEB.XML del proyecto con BLAZEDS:

<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
....aqui aparecen configuraciones de BLAZEDS...
</web-app>

CABECERA WEB.XML proyecto normal:
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
....configuraciones de otras cosas...
</web-app>


He cambiado la cabecera "a pelo", y aunque ahora me deja crear Servlet, me salen fallos y errores relacionados con las librerias, pero las librerias estan importadas perfectamente, por lo que el cambio "a pelo" no funciona.


Bueno a ver si me podeis decir una posible solucion.

Muchas gracias.

Rafael Berral

unread,
Sep 24, 2012, 6:51:31 AM9/24/12
to madei...@googlegroups.com
Hola de nuevo,
ante el problema que os expuse anteriormente...he encontrado las posibles soluciones.A continuacion os pongo los enlaces donde he encontrado información y las posibles soluciones al respecto, por si a alguien le pasa:

http://www.forosdelweb.com/f45/problema-netbeans-crear-servlet-836490/

http://stackoverflow.com/questions/4369911/web-application-version-is-unsupported-when-creating-a-servlet-netbeans

http://forums.netbeans.org/topic34078.html

http://www.mentby.com/Group/netbeans/web-application-version-is-unsupported.html

http://forums.netbeans.org/viewtopic.php?t=22154

http://www.coderanch.com/how-to/java/ServletsWebXml


Mi solucion particular ha sido, primero eliminar cabecera de DOCTYPE del web.xml, y despues agregar la libreria fileupload al IDE NetBeans.

Para variar, despues de configurar todo lo necesario para poder llamar "directamente" al servlet desde FlashBuilder, me da un fallo al intentar agregar el servicio, concretamente me dice lo siguiente:

the service .... contains overloaded method and is not supported Introspection.
Try importing by unselecting the destination "nombreServicio".

Despues (pensando que el fallo se debía a llamar directamente al servlet desde RemoteObject), probé a crear Sericio remoto a un metodo, y éste llamaría al servlet...pero tambien me daba un fallo al intentar agregar este servicio:
Unable to save the data model.
Reason: An error occurred while attempting to resolved the existing model.


Si alguien sabe algo al respecto agradecería su ayuda...ya voy a dejar este tema porque despues de unos dias no consigo solucionarlo.

Un saludo.

Francisco Rodríguez

unread,
Sep 24, 2012, 7:02:37 AM9/24/12
to madei...@googlegroups.com

Hola, me pregunto si no te es mas sencillo y practico crear otro war paralelo para los uploads?

Asi aislas tu backend tal cual se recomienda y como efecto colateral siempre podras descongestionar tus procesos de negocio de los uploads dandote movilidad de servidores, etc...

A ver si te vale esa solución.

Saludos.

Para ver este debate en la Web, visita https://groups.google.com/d/msg/madeinflex/-/zIggxAWhhK0J.

Rafael Berral

unread,
Sep 24, 2012, 7:21:44 AM9/24/12
to madei...@googlegroups.com
Buenas Francisco,

ante todo gracias por ayudarme a solucionar este problema.

No habia caido en hacerlo con un .war independiente...de hacerlo así, como puedo llamarlo desde mi proyecto Flex?
Me explico:
Ya tengo mi proyecto en Flash Builder configurado con un .war....se puede configurar con varios (creo que no) y acceder a todos los servicios de ellos¿?


Perdona si resulto un poco pesado.
Un saludo.

Rafael Berral

unread,
Nov 14, 2012, 8:32:07 AM11/14/12
to madei...@googlegroups.com
Buenas a todos!

hoy he conseguido encontrar la solución a mi problema sobre subir fotos al servidor con flex y java, :D.

Despues de hacer muchas pruebas, e intentar hacerlo mediante Remote Objects y HttpService (no conseguí hacerlo), encontre un ejemplo de David Junyent, en la pagina madeinflex, donde adapté lo que hizo a mi proyecto y...VOILA!
He tenido que pelearme un poco porque el dichoso BlazeDS me daba problemas al crear servlets (es más, no me dejaba, ;S), pero despues de hacer unos cuantos de cositas (el error se debía a la cabecera del web.xml) he conseguido que todo este perfect!

Aqui os pongo el enlace donde está el ejemplo resuelto, por si a alguien le sirve:

http://www.madeinflex.com/2009/11/01/subir-ficheros-con-flex-y-un-servlet-de-java/


URL del autor: http://davidjunyent.wordpress.com
Reply all
Reply to author
Forward
0 new messages