[SOLUCIONADO] JSF - FileUpload

jelastic · #1 (**permalink**) 13/12/2014, 12:17

Saludos a todos señores, soy nuevo, estoy trabajando con Primefaces, hibernate y maven, tengo una tabla vendedores y esta tiene un campo imagen que es de tipo string, pues lo que quiero hacer es guardar el nombre de la imagen y subir esa imagen al servidor el cual es la carpeta del proyecto.Ya pude mostrar el fileUpload, configuré el faces-config y el web xml, ya estan las dependencias en el pom.xml.
Pero cuando le doy guardar, me guarda todos los registros pero no el nombre de la imagen, lo primero que quiero hacer es guardar el nombre, luego de eso, intentare subir la imagen.

adjunto las lineas del fileupload

Código HTML:

Ver original<p:dialog id="fileUpload" header="#{msgs.form_imagen}" widgetVar="fileDialogWidget">
    <p:fileUpload fileUploadListener="#{vendedorBean.handleFileUpload}" mode="advanced" dragDropSupport="false"  
sizeLimit="20480" fileLimit="1" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" oncomplete="PF('fileDialogWidget').hide()" 
 uploadLabel="Subir Imagen" cancelLabel="Cancelar" label="Elegir" update="imagenG" /> 
    <p:graphicImage id="imagenG" value="#{vendedorBean.unVendedor.venImagen}" />                                
</p:dialog>

y el bean

Código Java:

Ver originalpublic void handleFileUpload(FileUploadEvent event) {
        file = event.getFile();
        try {
            byData = IOUtils.toByteArray(file.getInputstream());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

Se abre un dialog para escoger la imagen.

Ya funciona el boton subir, cuando le hago clic la barra hace el efecto de cargar.
La estructura de mi proyecto es para la parte web
-src>
-main>
-webapp>
-imgVendedor>img.jpg
....webapp>views>vendedor>nuevo.xhtml

Lo que deseo es subir la imagen a imgVendedor, y guardar el nombre en la bd como mencione anteriormente.

estoy usando
VendedorDao
VendedorDaoIpl --> para guardar me retorna un boolean
y VendedorBean

Espero se haya entendido, si puedo subir una imagen, pudeo subir cualquier cosa....gracias de antemano

HackmanC · #2 (**permalink**) 13/12/2014, 21:55

Hola,

Posiblemente, tendrías que guardar el nombre del archivo que se subió en alguna variable temporalmente, para que a la hora de guardar tengas esos datos disponibles.

Código:

public void handleFileUpload(FileUploadEvent event) {
		file = event.getFile();
		setVenImagen(file.getFilename());
		try {
			byData = IOUtils.toByteArray(file.getInputstream());
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

En ese momento ya tienes el nombre del archivo en venImagen (posiblemente, si el navegador envió el nombre).

Ahora, como siempre en el caso de JEE y principalmente JSF, si no se tiene toda la información sobre el problema es difícil saber con exactitud que es lo que tienes que hacer después.

Por ejemplo, si el ManagedBean es de Sesión, entonces ya no tienes que hacer nada mas, si es de Request, tendrás que poner ese valor en un <p:inputHidden> para que JSF después lo recoja en venImagen al hacer el POST.

Código HTML:

Ver original<p:dialog id="fileUpload" header="#{msgs.form_imagen}" widgetVar="fileDialogWidget">
    <p:fileUpload fileUploadListener="#{vendedorBean.handleFileUpload}" mode="advanced" dragDropSupport="false"  
sizeLimit="20480" fileLimit="1" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" oncomplete="PF('fileDialogWidget').hide()" 
 uploadLabel="Subir Imagen" cancelLabel="Cancelar" label="Elegir" update="imagenG" /> 
    <p:graphicImage id="imagenG" value="#{vendedorBean.unVendedor.venImagen}" />                                
</p:dialog>

Adicionalmente, esa parte es confusa, después de que cargas la imágen, actualizas imagenG pero lo ocultas, y adicionalmente tienes que observar que al usar graphicImage no se envía con el POST, porque es renderizado como un <img>, solamente sería un 'visual clue', aunque lo ocultas inmediatamente.

Saludos,

jelastic · #3 (**permalink**) 15/12/2014, 11:21

Cita:

Iniciado por HackmanC

Hola,

Posiblemente, tendrías que guardar el nombre del archivo que se subió en alguna variable temporalmente, para que a la hora de guardar tengas esos datos disponibles.

Código:

public void handleFileUpload(FileUploadEvent event) {
		file = event.getFile();
		setVenImagen(file.getFilename());
		try {
			byData = IOUtils.toByteArray(file.getInputstream());
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

En ese momento ya tienes el nombre del archivo en venImagen (posiblemente, si el navegador envió el nombre).

Ahora, como siempre en el caso de JEE y principalmente JSF, si no se tiene toda la información sobre el problema es difícil saber con exactitud que es lo que tienes que hacer después.

Por ejemplo, si el ManagedBean es de Sesión, entonces ya no tienes que hacer nada mas, si es de Request, tendrás que poner ese valor en un <p:inputHidden> para que JSF después lo recoja en venImagen al hacer el POST.

Código HTML:

Ver original<p:dialog id="fileUpload" header="#{msgs.form_imagen}" widgetVar="fileDialogWidget">
    <p:fileUpload fileUploadListener="#{vendedorBean.handleFileUpload}" mode="advanced" dragDropSupport="false"  
sizeLimit="20480" fileLimit="1" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" oncomplete="PF('fileDialogWidget').hide()" 
 uploadLabel="Subir Imagen" cancelLabel="Cancelar" label="Elegir" update="imagenG" /> 
    <p:graphicImage id="imagenG" value="#{vendedorBean.unVendedor.venImagen}" />                                
</p:dialog>

Adicionalmente, esa parte es confusa, después de que cargas la imágen, actualizas imagenG pero lo ocultas, y adicionalmente tienes que observar que al usar graphicImage no se envía con el POST, porque es renderizado como un <img>, solamente sería un 'visual clue', aunque lo ocultas inmediatamente.

Saludos,

Muchas gracias HackmanC, me funciono lo de agregar esa linea, y seteo el nombre de la imagen en un campo oculto, ya pude guardar el nombre de la imagen en la bd, ahora solo me falta guardar o copiar la imagen al servidor, el cual es la carpeta del proyecto en la carpeta imgVendedor.
Y repondiendo a lo ultimo, yo presionaba un boton y me abria un dialog donde seleccionaba la imagen a guardar, luego al presionar subir, el cuadro de dialogo desaparecia para poder guardar el registro, pero le quite esa opcion para que directo se abra

Al final quedo asi, para escoger la imagen es desde una pestaña

Código HTML:

Ver original<p:tab title="#{msgs.pImagen}">
<h:panelGrid columns="1" cellpadding="5" id="panelImagen" >
<p:graphicImage id="imagenG2" value="/imgEmpleados/#{vendedorBean.unVendedor.venImagen}"/>
<h:outputLabel value="#{msgs.form_imagen}" />
<p:fileUpload fileUploadListener="#{vendedorBean.handleFileUpload}" mode="advanced" dragDropSupport="false"
   sizeLimit="20480" fileLimit="1" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" 
      uploadLabel="Subir Imagen" cancelLabel="Cancelar" label="Elegir" update="imagenG" /> 
<p:graphicImage id="imagen"  value="#{vendedorBean.unVendedor.venImagen}" />    
<p:inputText id="imagenG"  value="#{vendedorBean.unVendedor.venImagen}" />  
</h:panelGrid>
</p:tab>

mi pregunta ahora es si me das una pista de como llevar la imagen al servidor, a la carpeta imgEmpleados como se muestra en el primer <p:graphicImage
De nuevo muchas gracias.

HackmanC · #4 (**permalink**) 15/12/2014, 12:34

Hola,

Cita:

Iniciado por jelastic

... ya pude guardar el nombre de la imagen en la bd, ahora solo me falta guardar o copiar la imagen al servidor, el cual es la carpeta del proyecto en la carpeta imgVendedor.
...
mi pregunta ahora es si me das una pista de como llevar la imagen al servidor, a la carpeta imgEmpleados como se muestra en el primer <p:graphicImage
...

Esa parte es simplemente guardar lo que tienes en byData en un archivo. Técnicamente hay demasiadas formas de guardar un archivo que viene de un InputStream en un OutputStream.

Código:

public void handleFileUpload(FileUploadEvent event) {
		file = event.getFile();
		try {
			byData = IOUtils.toByteArray(file.getInputstream());
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

Leer todo el ByteArray en memoria normalmente no es buena idea, (va a ocupar la misma cantidad de bytes en memoria RAM del tamaño original del archivo). Como estás usando Apache IO revisa en la documentación de esa librería que cuenta con un montón de métodos para leer, escribir y copiar archivos.

Para obtener el nombre de la carpeta destino podrías probar a usar:

Código:

FacesContext.getCurrentInstance().getExternalContext().getRealPath("/")...

Pero no estoy completamente seguro que funcione bien.

Un detalle adicional que posiblemente tendrías que tomar en cuenta es cambiarle de nombre al archivo final y guardar ese nombre en la base de datos, y solamente guardas el nombre del archivo original en la base de datos como referencia. Por los motivos lógicos como nombre duplicados, caracteres extendidos, etc. El nombre de archivo "Pruebas:Dos.jpg" en Windows no va a funcionar como posiblemente puedas creer inicialmente, aunque es un nombre completamente válido en Unix.

Saludos,

jelastic · #5 (**permalink**) 15/12/2014, 23:10

Cita:

Iniciado por HackmanC

Para obtener el nombre de la carpeta destino podrías probar a usar:

Código:

FacesContext.getCurrentInstance().getExternalContext().getRealPath("/")...

Pero no estoy completamente seguro que funcione bien.

Un detalle adicional que posiblemente tendrías que tomar en cuenta es cambiarle de nombre al archivo final y guardar ese nombre en la base de datos, y solamente guardas el nombre del archivo original en la base de datos como referencia. Por los motivos lógicos como nombre duplicados, caracteres extendidos, etc. El nombre de archivo "Pruebas:Dos.jpg" en Windows no va a funcionar como posiblemente puedas creer inicialmente, aunque es un nombre completamente válido en Unix.

Saludos,

Gracias nuevamente HackmanC, estuve intentando y pude enviar la imagen al servidor con estas lineas de codigo:

Código HTML:

Ver originalpublic void subirImagen() throws IOException {
        InputStream inputStream = null;
        OutputStream outputStream = null;
        VendedorDao vendedorDao = new VendedorDaoImpl();
        int cod = vendedorDao.getId();
        try {
            ServletContext servletContext = (ServletContext) FacesContext.getCurrentInstance().getExternalContext().getContext();
            String path = (String) servletContext.getRealPath("/imgEmpleados");
            outputStream = new FileOutputStream(new File(path + "/" + cod + ".jpg"));
            inputStream = this.file.getInputstream();
            int read = 0;
            byte[] bytes = new byte[1024];
            while((read=inputStream.read(bytes)) != -1) {
                outputStream.write(bytes, 0, read);
            }
            System.out.println("Imagen Subida Correctamente al Servidor en : "+path);
        } catch (Exception e) {
            System.out.println("No se pudo subir la imagen " + e.toString());
        } finally {
            if(inputStream != null) {
                inputStream.close();
            }
            if(outputStream != null) {
                outputStream.close();
            }
        }
    }

Este metodo lo llamo en el handleFileUpload().
Pero no me guarda en la carpeta que yo quiero sino en otra que es esta :
C:\Users\Jonathan\workpaceL\.metadata\.plugins\org .eclipse.wst.server.core\tmp2\wtpwebapps\Ferrerter iaWeb\imgEmpleados
y yo quiero que me guarde aqui: C:\Users\Jonathan\workpaceL\FerrerteriaWeb\src\mai n\webapp\imgEmpleados
que se me puede estar escapando, quizas falte algo.
Gracias.

HackmanC · #6 (**permalink**) 16/12/2014, 20:44

Hola,

Cita:

Iniciado por jelastic

...Pero no me guarda en la carpeta que yo quiero sino en otra que es esta :
C:\Users\Jonathan\workpaceL\.metadata\.plugins\org .eclipse.wst.server.core\tmp2\wtpwebapps\Ferrerter iaWeb\imgEmpleados
y yo quiero que me guarde aqui: C:\Users\Jonathan\workpaceL\FerrerteriaWeb\src\mai n\webapp\imgEmpleados
...

No estoy seguro si comprendes bien la diferencia entre esas dos rutas, la primera es la ruta donde está corriendo el servidor de aplicaciones de 'pruebas' dentro de Eclipse, al final si haces un deploy del WAR/EAR en el servidor no va a guardarlo en esa ruta, sino en otra diferente relativa al root de tu aplicación.

Ahora en el segundo caso no tiene sentido, no puedes guardar las imágenes dentro de esa carpeta porque ese es el proyecto donde estás trabajando, no va a ser la ruta donde va a correr tu aplicación. Si lo guardar allí va a ser incluido dentro del WAR o EAR que construyas con eclipse.

Como indiqué, en la primera ubicación no va a ser esa al final dentro de tu servidor, tendrías que hacer un deploy para ver donde va a guardar las imágenes realmente en el servidor real, no el de pruebas.

Así que, yo no sabría como encontrar esa ubicación en tiempo de ejecución de la aplicación, aunque de lo que estoy casi seguro es que no hay ninguna clase que haga referencia a esa ubicación. Podrías usar rutas absolutas si realmente tu intención es guardarlo en esa ubicación por algún motivo desconocido.

Saludos,

jelastic · #7 (**permalink**) 16/12/2014, 21:23

Cita:

Iniciado por HackmanC

Hola,

No estoy seguro si comprendes bien la diferencia entre esas dos rutas, la primera es la ruta donde está corriendo el servidor de aplicaciones de 'pruebas' dentro de Eclipse, al final si haces un deploy del WAR/EAR en el servidor no va a guardarlo en esa ruta, sino en otra diferente relativa al root de tu aplicación.

Ahora en el segundo caso no tiene sentido, no puedes guardar las imágenes dentro de esa carpeta porque ese es el proyecto donde estás trabajando, no va a ser la ruta donde va a correr tu aplicación. Si lo guardar allí va a ser incluido dentro del WAR o EAR que construyas con eclipse.

Como indiqué, en la primera ubicación no va a ser esa al final dentro de tu servidor, tendrías que hacer un deploy para ver donde va a guardar las imágenes realmente en el servidor real, no el de pruebas.

Así que, yo no sabría como encontrar esa ubicación en tiempo de ejecución de la aplicación, aunque de lo que estoy casi seguro es que no hay ninguna clase que haga referencia a esa ubicación. Podrías usar rutas absolutas si realmente tu intención es guardarlo en esa ubicación por algún motivo desconocido.

Saludos,

Hola, gracias, estuve investigando sobre eso, yo puse las imagenes en la carpeta dentro del proyecto, pues desde ahi las llamo para mostrarlas luego al hacer la consulta, del mismo modo que la pagina de primefaces, desde un comienzo no me gusto eso, pero bueno yo para consultar y llenar los campos para la edicion, lo hago en dos paginas diferentes, en una tengo mi lista con mis vendedores, y otra donde esta mi formulario, el formulario lo lleno con un bean, el fragmento de codigo es este:

Código Java:

Ver originalpublic String buscar(ActionEvent event) {
        this.unVendedor.setVenCodigo(unVendedor.getVenCodigo());
        return "/views/vendedores/editar";
    }

con eso llamo a mi otra hoja llamada editar.xhtml y lleno los campos, junto con la imagen el cual tienen este codigo :

Código HTML:

Ver original<p:graphicImage id="imagen" value="/imgEmpleados/#{vendedorBean.unVendedor.venImagen}"/>

habra alguna forma de mostrar la imagen del servidor y no la que esta en el proyecto, no encontre nada parecido este dia, y ahi me quedé.
Gracias

HackmanC · #8 (**permalink**) 16/12/2014, 22:27

Hola,

Cita:

Iniciado por jelastic

Código HTML:

Ver original<p:graphicImage id="imagen" value="/imgEmpleados/#{vendedorBean.unVendedor.venImagen}"/>

Allí ya las cosas se pusieron un poco confusas, si subiste la imagen en la ubicación que indicaste anteriormente, el directorio wtpwebapps. Con este código que muestras debería aparecer la imagen correctamente, sin importar si está en pruebas o es el servidor real, porque es 'relativa'. Por ese motivo fue que usaste el método getRealPath().

Cita:

Iniciado por jelastic

...habra alguna forma de mostrar la imagen del servidor y no la que esta en el proyecto, no encontre nada parecido este dia, y ahi me quedé. ...

Primero que todo, tienes que tomar en cuenta que aunque Eclipse guarda los proyectos por defecto en el Workspace, no debería ser así; principalmente porque resulta confuso en algunos casos, y no sabes que parte es tu proyecto y que parte el Workspace. Deberías de tomarte el tiempo para crear una carpeta con tus proyectos (fuera del workspace) y allí guardar tus programas. El Workspace no es tu proyecto.

No estoy seguro pero creo, aunque me puedo equivocar, que tu crees que el directorio wtpwebapps está dentro de tu proyecto, pero ese solamente es un espacio temporal donde Eclipse pone los archivos 'temporalmente', valga la redundancia, para que puedas hace pruebas.

Como mencioné anteriormente, cuando hagas el deploy en el servidor vas a comprender donde se guardan los archivos realmente. Revisa la documentación del servidor web que estés usando.

Por ejemplo, https://docs.jboss.org/jbossas/guide...html/dirs.html

Saludos,

jelastic · #9 (**permalink**) 18/12/2014, 15:06

Cita:

Iniciado por HackmanC

Hola,

Allí ya las cosas se pusieron un poco confusas, si subiste la imagen en la ubicación que indicaste anteriormente, el directorio wtpwebapps. Con este código que muestras debería aparecer la imagen correctamente, sin importar si está en pruebas o es el servidor real, porque es 'relativa'. Por ese motivo fue que usaste el método getRealPath().

Primero que todo, tienes que tomar en cuenta que aunque Eclipse guarda los proyectos por defecto en el Workspace, no debería ser así; principalmente porque resulta confuso en algunos casos, y no sabes que parte es tu proyecto y que parte el Workspace. Deberías de tomarte el tiempo para crear una carpeta con tus proyectos (fuera del workspace) y allí guardar tus programas. El Workspace no es tu proyecto.

Ya movi el proyecto a una carpeta especifica, la puse en D:/, pero ahora que intente subir la imagen ya no se puede.

Cita:

Iniciado por HackmanC

No estoy seguro pero creo, aunque me puedo equivocar, que tu crees que el directorio wtpwebapps está dentro de tu proyecto, pero ese solamente es un espacio temporal donde Eclipse pone los archivos 'temporalmente', valga la redundancia, para que puedas hace pruebas.

el directorio wtpwebapps, esta fuera de mi carpeta del proyecto, esta en la raiz del workpace, despues todo lo que esta ahi, se borra.

Cita:

Iniciado por HackmanC

Como mencioné anteriormente, cuando hagas el deploy en el servidor vas a comprender donde se guardan los archivos realmente. Revisa la documentación del servidor web que estés usando.

Por ejemplo, [url]https://docs.jboss.org/jbossas/guides/installguide/r1/en/html/dirs.html[/url]

Saludos,

Revisare con mas detenimiento e investigare el tema de servidores, creí que mi servidor era la carpeta del proyecto, lo que quier hacer es crear una carpeta en C: o D y meter mis archivos ahi....mientras tanto, se soluciono solo una parte de mi problema, cuando tenga la solucion copleta, la publicare aqui...Gracias....

jelastic · #10 (**permalink**) 21/01/2015, 21:57

Bueno quiero dar por solucionado el tema, investige mas a fondo lo que el usuario HackmanC me dijo y lo entendi correctamente.
Cuando yo exporto el proyecto a .war y lo levanto en el servidor que puede ser apache tomcat, glaassfish, jboss entre otros, la imagen se sube en la carpeta temporal del servidor, y desde ahi recien puedo visualizar la imagen, pero en cambio cuando estaba trabajando aun la imagen se guardaba en otro lado, desde la cual no se visualiza, el codigo mostrado arriba es correcto y funciona perfectamente.
Gracias