My admin dashboard is built on spring with JSF 2.2 + Primefaces 5.3.
I am developing form for creating new entities, which should work as follows:
- User fill in all input fields and upload image (using
<p:fileUpload). - Then, the
<p:imageCroppershould be refreshed and displayed uploaded image to be cropped. - User cropped image, and press submit button to create new entity and store image on the disk.
Now, I stuck on the 2 step. Uploaded image is not displayed by <p:imageCropper.
I have doubts if it's possible to get image to the <p:imageCropper image attribute from the StreamedContent obj from the managed bean, like for <p:graphicImage?
So, please let me know how it could be solved?
Here is my form:
<h:form prependId="false" id="createForm" enctype="multipart/form-data">
<p:separator />
<p:growl id="messages" showDetail="true" />
<p:outputLabel value="Create card:" />
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel value="Fill in Name:" for="cardName" />
<p:inputText id="cardName" value="#{cardController.name}"
required="false" requiredMessage="Please, enter new card Name" />
<p:outputLabel value="Fill in Description:" for="cardDescription" />
<p:inputTextarea id="cardDescription" rows="3" cols="33"
value="#{cardController.description}" />
<p:outputLabel value="Upload image:" for="cardImage" />
<p:fileUpload id="cardImage"
fileUploadListener="#{cardController.handleFileUpload}"
auto="false"
mode="advanced" dragDropSupport="false" update="messages cropped uploaded"
sizeLimit="100000" fileLimit="3"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
<p:outputLabel value="change size of the image:" for="cropped" />
<p:imageCropper id="cropped" value="#{cropperView.croppedImage}" image="#{cardController.image}" initialCoords="225,75,300,125"/>
<p:graphicImage id = "uploaded" value="#{cardController.image}"/>
<p:commandButton value="Create"
action="#{categoryController.create()}"
update=" createForm" />
<p:message for="cardName" />
</h:panelGrid>
</h:form>
Controller:
@Controller
@Scope("session")
public class CardController {
private CroppedImage croppedImage;
private UploadedFile uploadedFile;
private String name;
private String description;
public void handleFileUpload(FileUploadEvent event) throws IOException {
System.out.println("!!! inside file upload");
FacesMessage message = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, message);
uploadedFile = event.getFile();
}
public StreamedContent getImage() {
FacesContext context = FacesContext.getCurrentInstance();
if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
// So, we're rendering the HTML. Return a stub StreamedContent so that it will generate right URL.
return new DefaultStreamedContent();
}
else {
// So, browser is requesting the image. Return a real StreamedContent with the image bytes.
return new DefaultStreamedContent(new ByteArrayInputStream(uploadedFile.getContents()));
}
}
public void create() {
// shoul be logic for creating new entities
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public CroppedImage getCroppedImage() {
return croppedImage;
}
public void setCroppedImage(CroppedImage croppedImage) {
this.croppedImage = croppedImage;
}
public UploadedFile getUploadedFile() {
return uploadedFile;
}
public void setUploadedFile(UploadedFile uploadedFile) {
this.uploadedFile = uploadedFile;
}
}
