1
Mein Admin-Dashboard basiert auf Spring mit JSF 2.2 + Primefaces 5.3.Primefaces, p: imageCropper konnte das Bild nach dem Upload nicht anzeigen
I Form entwickle neue Einheiten für die Erstellung, die funktionieren sollte wie folgt:
- Benutzer in allen Eingabefelder ausfüllen und laden Bild (mit
<p:fileUpload). - Dann sollte die
<p:imageCropperaktualisiert werden und angezeigt werden hochgeladen Bild zu beschneiden. - Benutzer zugeschnittenes Bild, und drücken Sie die Schaltfläche Senden, um neue Entität zu erstellen und Bild auf der Festplatte zu speichern.
Jetzt steckte ich auf der 2 Schritt. Das hochgeladene Bild wird von <p:imageCropper nicht angezeigt.
Ich habe Zweifel, ob es möglich ist, das Bildattribut <p:imageCropper aus dem StreamedContent-Obj von der verwalteten Bean zu erhalten, wie für <p:graphicImage?
Also, lassen Sie mich bitte wissen, wie es gelöst werden könnte?
Hier ist meine 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;
}
}
@BalusC: Hallo, vielen Dank für die schnelle Antwort. Wenn ich ein benutzerdefiniertes ViewScope benutze, wird das '
@BalusC: Sollte '
@BalusC: Vorherigen Kommentar aktualisieren: Soll