Skip to main content

FileUpload con Primefaces

FileUpload con Primefaces


goto.png
Si queremos subir imagenes a nuestra aplicaciĆ³n usaremos el componente FileUpload
Debemos realizar los siguientes pasos:

Agregar al archivo web.xml


   <filter>
       <filter-name>PrimeFaces FileUpload Filter</filter-name>
       <filter-class>
           org.primefaces.webapp.filter.FileUploadFilter
       </filter-class>
   </filter>
   <filter-mapping>
       <filter-name>PrimeFaces FileUpload Filter</filter-name>
       <servlet-name>Faces Servlet</servlet-name>
   </filter-mapping>


s.png


Crear dentro de resources el directorio donde deseamos almacenar las imagenes
En este ejemplo: resources/fotos/clinicas y agregue una imagen llamada fotos.png que se usarĆ” como imagen inicial.
f.png




En JSFUtil u otro @Named Beans que usemos agregamos tres mĆ©todos uno para obtener el path de la aplicaciĆ³n web , otro para obtener el path relativo a /fotos/clinicas y el otro para copiar los archivos.
/*
    devuelve el path de la aplicacion
    */
   public static String getPath() {
       try {
           ServletContext ctx = (ServletContext) FacesContext.getCurrentInstance()
                   .getExternalContext().getContext();
           return ctx.getRealPath("/");


       } catch (Exception e) {


           addErrorMessage("getPath() " + e.getLocalizedMessage());
       }
       return null;


   }

/*
    devuelve un hashmap con la ruta de fotos clinicas y el url para las imagenes
    */
   public static HashMap<String, String> getMapPathFotosClinica() {
       try {
           HashMap<String, String> map = new HashMap<String, String>();
          
           String path = getPath() + "resources/fotos/clinicas/";
           map.put("path", path);
           map.put("url", "/resources/fotos/clinicas/");
           return map;
       } catch (Exception e) {


           addErrorMessage(" getMapPathFotosClinica() " + e.getLocalizedMessage());
       }
       return null;


   }


    /*
    devuelve un hashmap con la ruta de fotos clinicas y el url para las imagenes
    */
   public static String getPathFotosClinica() {
       try {             
       
           String path = getPath() + "resources/fotos/clinicas/";
return path;
       } catch (Exception e) {


           addErrorMessage("getPathFotosClinica() " + e.getLocalizedMessage());
       }
       return null;


   }



   /*
    copia un archivo generalmente cuando se usa el fileupload
    fileName: nombre del archivo a copiar
    in: Es el InputStream
    destination: ruta donde se guardara el archivo
 
    */
   public static Boolean copyFile(String fileName, InputStream in, String destination) {
       try {


           // write the inputStream to a FileOutputStream
           OutputStream out = new FileOutputStream(new File(destination + fileName));


           int read = 0;
           byte[] bytes = new byte[1024];


           while ((read = in.read(bytes)) != -1) {
               out.write(bytes, 0, read);
           }


           in.close();
           out.flush();
           out.close();


           return true;
       } catch (IOException e) {
           JSFUtil.addErrorMessage("copyFile() " + e.getLocalizedMessage());
       }
       return false;
   }
Mostrare dos formas para manejar la imagen , una atraves del path incluyendo el url
En el Controller agregar dos atributos.


private String imagenURL ="/resources/fotos/clinicas/foto.png";
private String imagen="foto.png";


Nota: Recuerde que en el directorio /resources/fotos/clinicas se agrego una imagen llamada fotos.png.


crear el mĆ©todo  handleFileUpload() que se encarga de guardar el archivo


En este obtenemos la ruta del directorio /fotos/clinicas/
   public void handleFileUpload(FileUploadEvent event) {
       try {


           UploadedFile file = event.getFile();
//application code
           String destination;


           HashMap<String, String> map = JSFUtil.getPathFotosClinica();


           destination = map.get("path");
           if (destination == null) {
               JSFUtil.addErrorMessage(rf.getMensajeArb("warning.noseobtuvopath"));
           } else {
               imagenURL = map.get("url") + file.getFileName();
               imagen = file.getFileName();
               if (JSFUtil.copyFile(file.getFileName(), file.getInputstream(), destination)) {                  
               }
           }


       } catch (Exception e) {
           JSFUtil.addErrorMessage("handleFileUpload()" + e.getLocalizedMessage());
       }


   }




En la pagina xhtml agregamos el componente.
Colocamos dos <h:graphicImage en el primero usamos el url completo y en el segundo solo el nombre de la imagen.
y.png
 <p:panelGrid id="fotos" columns="1">
             <h:graphicImage value="#{clinicasController.imagenURL}" height="100" width="100"/>
           <h:graphicImage value="/resources/fotos/clinicas/#{clinicasController.imagen}" height="100" width="100"/>
         <p:fileUpload auto="true" label="Foto" fileUploadListener="#{clinicasController.handleFileUpload}" update=":form:growl,:form:fotos"/>
                          
                        </p:panelGrid>


al dar clic en el botĆ³n FOTO , seleccionamos una imagen y se carga la  imagen en los dos componentes.
d.png
Solo dejamos una de los dos , esta incluido solo a modo de ejemplo. Recomendaria usar     <h:graphicImage value="/resources/fotos/clinicas/#{clinicasController.imagen}" height="100" width="100"/>


Si ejecutamos el proyecto desde NetBeans IDE, con un proyecto web Maven
lo guarda la imagen en el path /target/nombreproyectoversion/resources/fotos/clinicas
a.png

FileUpload y almacenar la imagen en una base de datos
Si tenemos un campo llamado logoClinica de tipo String en la tabla


Ajustamos el Controller
 @PostConstruct
   public void init() {
       nuevoregistro = false;
       desactivar = true;
       clinicas.setLogoClinica("foto.png");


   }
 @Override
   public String prepararNew() {
       try {
           
           clinicas = new Clinicas();
           clinicas.setLogoClinica(imagen);


       } catch (Exception e) {
           JSFUtil.addErrorMessage(e.getLocalizedMessage());
       }
       return null;
   }

@Override
   public String save() {
       try {
               clinicas = new Clinicas();
              clinicas.setLogoClinica(imagen);
       


@Override
   public String delete() {
       try {
                   clinicas.setLogoClinica(imagen);




Editamos el mĆ©todo  handleFileUpload()
public void handleFileUpload(FileUploadEvent event) {
       try {


           UploadedFile file = event.getFile();
//application code
           String destination;


                 destination = JSFUtil.getPathFotosClinica();
           if (destination == null) {


               JSFUtil.addErrorMessage(rf.getMensajeArb("warning.noseobtuvopath"));
           } else {
               
               clinicas.setLogoClinica(file.getFileName());
               if (JSFUtil.copyFile(file.getFileName(), file.getInputstream(), destination)) {
                  
               }
           }


       } catch (Exception e) {
           JSFUtil.addErrorMessage("handleFileUpload()" + e.getLocalizedMessage());
       }


   }

Comments

Popular posts from this blog

Cambiando el estado de un checkbox

Cambiando el Estado de un CheckBox Algunas veces deseamos controlar el estado de un checkbox o cambiarlo segĆ¹n determinadas condiciones. Pasos: 1. Creamos un proyecto Web. 2. En el diseƱador agregamos un checkbox y dos botones. * Dar click derecho en el checkbox y luego seleccionar Add Binding Attribute, para agregar los atributos al checkbox, de manera que los podamos usar en nuestro cĆ³digo. Generando automĆ”ticamente private Checkbox checkbox1 = new Checkbox(); public Checkbox getCheckbox1() { return checkbox1; } public void setCheckbox1(Checkbox c) { this.checkbox1 = c; } 3.Damos click derecho en el botĆ³n Habilitar, y seleccionamos Edit Action Event Handler. A continuaciĆ³n, agregamos el cĆ³digo: this.checkbox1.setSelected(true);, el mĆ©todo setSelected con valor true, marca el checkbox como seleccionado, y un valor de false, quita la marca. public String button1_action() { // TODO: Process the action. Return value is a navigation //

Corregir el error el archivo de manifiesto en proyectos maven

Corregir el error en el archivo de manifiesto en proyectos maven Si creamos un proyecto maven con NetBeans e intentamos ejecutarlo encontrarĆ­amos el siguiente error Agregamos el plugin   <artifactId>maven-jar-plugin</artifactId>  <plugin>                 <groupId>org.apache.maven.plugins</groupId>                 <artifactId>maven-jar-plugin</artifactId>                 <version>2.4</version>                 <configuration>                     <archive>                         <manifest>                             <mainClass>org.javscaz.maven1.App</mainClass>                         </manifest>                                           </archive>                 </configuration>             </plugin> Luego al construir el proyecto con dependencias, podemos ejecutar el .jar

Tutorial bƔsico de aplicaciones Web con NetBeans parte 1

NetBeans ofrece un excelente soporte para el desarrollo de aplicaciones Web, en esta ocasiĆ³n lo haremos utilizando el Framework Java Server Faces 2.0. En el Menu Seleccionamos Nuevo->Proyecto y luego en Categorias Java Web y en tipo de Proyectos Web  Application indicamos el nombre del proyecto Seleccinamos el servidor Web, usamos GlassFish ya que este soporta EJB3.0 y JSF 2.0 Framework Java Server Faces El IDE genera el esquelto del proyecto Web Pages   almacenamos las paginas .html, xhtml, jsf, los archivos de recursos, los scripts .js, imagenes Source Packages    Son las clases Java  Test Packages    Son las clases que usamos para los Test Libraries     Tenemos las bibliotecas de Java y GlassFish necesarias para ejecutar la aplicaciĆ³n Web. Test Libraries     EstĆ”n las bibliotecas usadas para los test  Configuration Files    Archivos de configuraciĆ³n de la aplicaciĆ³n. Ejecutamos la aplicaciĆ³n  Esperamos que se inicie GlassFish y se cargue la aplicaciĆ³n Este se