FileUpload con Primefaces
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>
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.
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.
<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.
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
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