title: Primefaces, p:imageCropper could not display image after upload
body: <p>My admin dashboard is built on spring with JSF 2.2 + Primefaces 5.3. </p>
  
  <p>I am developing form for creating new entities, which should work as follows: </p>
  
  <ol>
  <li>User fill in all input fields and upload image (using <code>&lt;p:fileUpload</code>).</li>
  <li>Then, the <code>&lt;p:imageCropper</code> should be refreshed and displayed uploaded image to be cropped.</li>
  <li>User cropped image, and press submit button to create new entity and store image on the disk. </li>
  </ol>
  
  <p>Now, I stuck on the 2 step. Uploaded image is not displayed by <code>&lt;p:imageCropper</code>. </p>
  
  <p>I have doubts if it's possible to get image to the <code>&lt;p:imageCropper</code> image attribute from the StreamedContent obj from the managed bean, like for <a href="https://stackoverflow.com/questions/10073905/problems-displaying-database-blob-image-in-primefaces-graphicimage/10161878#10161878"><code>&lt;p:graphicImage</code></a>?</p>
  
  <p>So, please let me know how it could be solved?</p>
  
  <p>Here is my form: </p>
  
  <pre><code>&lt;h:form prependId="false" id="createForm" enctype="multipart/form-data"&gt;
              &lt;p:separator /&gt;
                  &lt;p:growl id="messages" showDetail="true" /&gt;
                  &lt;p:outputLabel value="Create card:" /&gt;
                  &lt;h:panelGrid columns="2" cellpadding="5"&gt;
                      &lt;p:outputLabel value="Fill in Name:" for="cardName" /&gt;
                      &lt;p:inputText id="cardName" value="#{cardController.name}"
                          required="false" requiredMessage="Please, enter new card Name" /&gt;
                      &lt;p:outputLabel value="Fill in Description:" for="cardDescription" /&gt;
                      &lt;p:inputTextarea id="cardDescription" rows="3" cols="33"
                          value="#{cardController.description}" /&gt;
                      &lt;p:outputLabel value="Upload image:" for="cardImage" /&gt;
                      &lt;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)$/" /&gt;
  
                      &lt;p:outputLabel value="change size of the image:" for="cropped" /&gt;
                      &lt;p:imageCropper id="cropped" value="#{cropperView.croppedImage}" image="#{cardController.image}" initialCoords="225,75,300,125"/&gt;
                      &lt;p:graphicImage id = "uploaded" value="#{cardController.image}"/&gt;
                      &lt;p:commandButton value="Create"
                          action="#{categoryController.create()}"
                          update=" createForm" /&gt;
                      &lt;p:message for="cardName" /&gt;
  
  
                  &lt;/h:panelGrid&gt;
          &lt;/h:form&gt;
  </code></pre>
  
  <p>Controller: </p>
  
  <pre><code>@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;
      }
  
  }
  </code></pre>