Tengo una vista de bean con ámbito donde creo una persona. Una persona puede tener una imagen. Esta imagen se carga en la misma página donde se creó la persona. La imagen no se almacena en una base de datos o en un disco (ya que la persona aún no se ha creado). El bean tiene que ser visto desde una persona que puede ser creada en otro lugar y esto usa el mismo bean. Si el bean tiene un ámbito de sesión y un usuario carga una imagen pero no la guarda, la imagen se mostrará la próxima vez que el usuario intente crear una persona.Mostrar imagen cargada en JSF
Lo resolví usando dos frijoles; una vista de bean con ámbito para crear la persona y una sesión de bean con ámbito para cargar la imagen y obtener la imagen como una secuencia. Sin embargo, esto causa el problema mencionado anteriormente.
¿Cómo puedo resolver esto de una mejor manera?
El grano de carga:
@ManagedBean(name = "uploadBean")
@SessionScoped
public class UploadBean
{
private UploadedFile uploadedFile;
public UploadedFile getUploadedFile()
{
return uploadedFile;
}
public StreamedContent getUploadedFileAsStream()
{
if (uploadedFile != null)
{
return new DefaultStreamedContent(new ByteArrayInputStream(uploadedFile.getContents()));
}
return null;
}
public void uploadFile(FileUploadEvent event)
{
uploadedFile = event.getFile();
}
}
El crear a un persona frijol:
@ManagedBean(name = "personBean")
@ViewScoped
public class PersonBean
{
private Person newPerson = new Person();
public Person getNewPerson()
{
return newPerson;
}
private UploadedFile getUploadedPicture()
{
FacesContext context = FacesContext.getCurrentInstance();
ELContext elContext = context.getELContext();
UploadBean uploadBean = (UploadBean) elContext.getELResolver().getValue(elContext, null, "uploadBean");
return uploadBean.getUploadedFile();
}
public void createPerson()
{
UploadedFile uploadedPicture = getUploadedPicture();
// Create person with picture;
}
}
La parte correspondiente página JSF:
<h:form enctype="multipart/form-data">
<p:outputPanel layout="block" id="personPicture">
<p:graphicImage height="150"
value="#{uploadBean.uploadedFileAsStream}"
rendered="#{uploadBean.uploadedFileAsStream != null}" />
</p:outputPanel>
<p:fileUpload auto="true" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
fileUploadListener="#{uploadBean.uploadedFile}"
update="personPicture" />
<p:commandButton value="Save" actionListener="#{personBean.createPerson()}"/>
</h:form>
Es interesante, que pidió un ejemplo en JSF y terminó con un poco de "Javascript/JQuery magic". También su comentario a la otra respuesta es más que necasario, porque el ejemplo de él es bastante agradable. Hay muchas formas JSF para hacer su tarea bastante bien, y no es necesario incluir JS aquí. ¿Puedes por favor editar tu pregunta o respuesta también? La pregunta y la respuesta no encajan juntas. – alexander
La respuesta resolvió el problema que tenía, entonces ¿cómo no encajan? También me gustaría decir que la pregunta tiene fecha del 16 de julio de 2012, hace más de dos años. Puedo decir con seguridad que esta pregunta es irrelevante para mí. Si hay algo mal con mi respuesta, puede editarlo. ;-) – siebz0r