use of List<StreamedContent> in Galleria or Ui:repeat to show jpg Byte[] using p:graphicImage PF13.0.1

[shawnclardonronaldneilscorliss]

Hi All,
I am having an issue getting <p:galleria> or <ui:repeat> to work with <p:graphicImage> when using a List<StreamedContent> that contains StreamContent from a Byte[] containing byte data from a jpg image.

Above you can see an image of the panel that we are rendering to. As you can see I can access the signatures and read the class data from it.
But when I attempt to render either byte data or the StreamedContent in the class I get the error that you see below the signatures panel.

In the XHTML file I am calling:

<h:panelGroup>
<p:dataTable var="tbssign" value="#{SurvyTailboard.selectedTailBoard.signatures}">
                            <p:column headerText="Signature Date:">
                                <h:outputText value="#{tbssign.sigDate}"/>
                            </p:column>
                            <p:column headerText="Signed By:">
                                <h:outputText value="#{tbssign.signee}"/>
                            </p:column>
                            <p:column headerText="Organization:">
                                <h:outputText value="#{tbssign.signeeOrg}"/>
                            </p:column>
                            <p:column headerText="Signature Image:">
                                <h:outputText value="#{SurvyTailboard.selectedStreamedSignatures}"/>
                            </p:column>
                        </p:dataTable>
                    </h:panelGroup>
                </h:panelGrid>
                <div class="card">
                            <p:galleria value="#{SurvyTailboard.selectedStreamedSignatures}" 
                                var="photo" 
                                showCaption="true" style="max-width: 640px" 
                                numVisible="5" showIndicators="true" 
                                showItemNavigators="true" 
                                showItemNavigatorsOnHover="true" 
                                circular="true">
                                <p:graphicImage name="#{SurvyTailboard.selectedStreamedSignatures.stream()}" style="width: 100%; height: 100%; display: block;" />
                            </p:galleria>
                    </div>

I have also tried to use a repeat and this is also not working.
The file below is the implementation class used on the xhtml page.

package com.womgt.logic;

import com.womgt.hibernate.LEU_SURVYDAO1;
import com.womgt.hibernate.SurvyTailBoard;
import java.io.ByteArrayInputStream;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import org.primefaces.event.SelectEvent;
import javax.faces.context.FacesContext;
import javax.faces.application.FacesMessage;
import org.primefaces.model.StreamedContent;
import org.primefaces.model.DefaultStreamedContent;

/**
 *
 * @author x1035
 */
public class SurvyImpl implements Serializable{
    
    List<SurvyTailBoard> plSurvyTailBoards;
    private LEU_SURVYDAO1 LeuSURVYDAO1;
    private long woNumberLike;
    private String addressLike;
    private List<SurvyTailBoard> plFilteredList;
    private SurvyTailBoard selectedTailBoard;
    private List<StreamedContent> selectedStreamedSignatures;
    
    
    public void lookupSrvy(){
       
        String sQuery = "";
        
        if (addressLike == null) { addressLike = ""; }
        
        if (woNumberLike!=0||!"".equals(addressLike)){
           
            if(woNumberLike >0){
                sQuery+= "WONumber =" +woNumberLike+" and ";
            }
            if(!"".equals(addressLike)){
                sQuery+= "Address like '%"+addressLike+"%' and ";
            }
        }
        if(!"".equals(sQuery)&& !sQuery.isBlank() && !sQuery.isEmpty()){
          sQuery = " where "+sQuery;
          
          if(sQuery.endsWith("and ")){
              sQuery = sQuery.substring(0, sQuery.length()-4);
          }
          
          plSurvyTailBoards = LeuSURVYDAO1.GetAllSurvyTailboards(sQuery);
        
        }
        
    }
    public void testSrvy(){
        
        plSurvyTailBoards = LeuSURVYDAO1.GetAllSurvyTailboards();
    }
    
    public void resetSrvySearchCriteria(){
        this.woNumberLike = 0;
        this.addressLike = null;
    }
    
    public void byteToStreamsSignatures() {
        String sMimeType = "image/jpeg";
        
        int count= selectedTailBoard.getSignatures().size();
        
        this.selectedStreamedSignatures = (List) new ArrayList<>();
        
        for(int i=0;i< selectedTailBoard.getSignatures().size();i++){
        
            byte[] byteData = selectedTailBoard.getSignatures().get(i).getSigImage();
            
            
            this.selectedStreamedSignatures.add(DefaultStreamedContent.builder().stream(() -> 
                    new ByteArrayInputStream(byteData)).contentType(sMimeType).build());
        }
        
    }
    
    public void onTailBoardClicked(SelectEvent e)
    {
        this.selectedTailBoard = (SurvyTailBoard)e.getObject();
        this.selectedTailBoard = LeuSURVYDAO1.getRemaningSurvyTailboard(this.selectedTailBoard);
        byteToStreamsSignatures();
        
        FacesContext context = FacesContext.getCurrentInstance();
        try
        {
            context.getExternalContext().redirect("WOTailBoardDetails.xhtml");
        }
        catch (Exception ex)
        {
            String sError = ex.getMessage();
            context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "Error", "Cannot Link to General Info page!"));
            sError = "ERROR: Cannot Link to General Info page! " + sError;
            String sTemp = "SearchImpl: In onSearchRowSelect() this error occurred: " + sError + "\r\n";
            LeuSURVYDAO1.CreateSLF4JLog(sTemp, 1); // send ERROR log.
        }
    }
    
    // ************************************************************************
    // ********************* GETTER AND SETTERS ASSESSORS *********************
    // ************************************************************************
    
    /**
    * @return the LeuSURVYDAO1
    */
    public LEU_SURVYDAO1 getLeuSURVYDAO1() {
        return LeuSURVYDAO1;
    }

    /**
     * @param LeuSURVYDAO1 the LeuSURVYDAO1 to set
     */
    public void setLeuSURVYDAO1(LEU_SURVYDAO1 LeuSURVYDAO1) {
        this.LeuSURVYDAO1 = LeuSURVYDAO1;
    }

    /**
     * @return the plSurvyTailBoards
     */
    public List<SurvyTailBoard> getPlSurvyTailBoards() {
        return plSurvyTailBoards;
    }

    /**
     * @param plSurvyTailBoards the plSurvyTailBoards to set
     */
    public void setPlSurvyTailBoards(List<SurvyTailBoard> plSurvyTailBoards) {
        this.plSurvyTailBoards = plSurvyTailBoards;
    }

    /**
     * @return the woNumberLike
     */
    public long getWoNumberLike() {
        return woNumberLike;
    }

    /**
     * @param woNumberLike the woNumberLike to set
     */
    public void setWoNumberLike(long woNumberLike) {
        this.woNumberLike = woNumberLike;
    }

    /**
     * @return the addressLike
     */
    public String getAddressLike() {
        return addressLike;
    }

    /**
     * @param addressLike the addressLike to set
     */
    public void setAddressLike(String addressLike) {
        this.addressLike = addressLike;
    }

    /**
     * @return the plFilteredList
     */
    public List<SurvyTailBoard> getPlFilteredList() {
        return plFilteredList;
    }

    /**
     * @param plFilteredList the plFilteredList to set
     */
    public void setPlFilteredList(List<SurvyTailBoard> plFilteredList) {
        this.plFilteredList = plFilteredList;
    }

    /**
     * @return the selectedTailBoard
     */
    public SurvyTailBoard getSelectedTailBoard() {
        return selectedTailBoard;
    }

    /**
     * @param selectedTailBoard the selectedTailBoard to set
     */
    public void setSelectedTailBoard(SurvyTailBoard selectedTailBoard) {
        this.selectedTailBoard = selectedTailBoard;
    }

    /**
     * @return the selectedStreamedSignatures
     */
    public List<StreamedContent> getSelectedStreamedSignatures() {
        return selectedStreamedSignatures;
    }

    /**
     * @param selectedStreamedSignatures the selectedStreamedSignatures to set
     */
    public void setSelectedStreamedSignatures(List<StreamedContent> selectedStreamedSignatures) {
        this.selectedStreamedSignatures = selectedStreamedSignatures;
    }
    
}

The mime type is hardcoded as these files will always be jpeg. I have also tried .jpg but to no avail.

The signatures class is a plain ordinary java object (POJO) class, where the files byte data is stored in the sigImage byte array.

package com.womgt.hibernate;

import java.util.Date;

/**
 *
 * @author x1035
 */
public class SurvySignatures {

    private String sSigID;
    private Date sigDate;
    private String signee;
    private String signeeOrg;
    private byte[] sigImage;
    
    /**
     * @return the sigID
     */
    public String getsSigID() {
        return sSigID;
    }

    /**
     * @param sigID the sigID to set
     */
    public void setsSigID(String sigID) {
        this.sSigID = sigID;
    }

    /**
     * @return the sigDate
     */
    public Date getSigDate() {
        return sigDate;
    }

    /**
     * @param sigDate the sigDate to set
     */
    public void setSigDate(Date sigDate) {
        this.sigDate = sigDate;
    }

    /**
     * @return the signee
     */
    public String getSignee() {
        return signee;
    }

    /**
     * @param signee the signee to set
     */
    public void setSignee(String signee) {
        this.signee = signee;
    }

    /**
     * @return the signeeOrg
     */
    public String getSigneeOrg() {
        return signeeOrg;
    }

    /**
     * @param signeeOrg the signeeOrg to set
     */
    public void setSigneeOrg(String signeeOrg) {
        this.signeeOrg = signeeOrg;
    }

    /**
     * @return the sigImage
     */
    public byte[] getSigImage() {
        return sigImage;
    }

    /**
     * @param sigImage the sigImage to set
     */
    public void setSigImage(byte[] sigImage) {
        this.sigImage = sigImage;
    }
}

To recap, data is read from a database for signature data, which contains byte data. This byte data is then stored in sigImage. This data is then converted into a StreamedContent object which I was hoping to use to render the images on the XHTML.

Any help would be appreciated.
Thanks,
Scorliss
 

[tandraschko]

Just check our showcase, thats how we support it:
https://www.primefaces.org/showcase/ui/multimedia/galleria/dynamic.xhtml

if you would like to understand why its a bit more complicated then just binding a List<StreamedContent>, you need to understand: https://primefaces.github.io/primefaces/14_0_0/#/core/dynamiccontent

[shawnclardonronaldneilscorliss]

Sorry, I think I am missing something. reading thorugh the documentation it looks like I'm following the prescription of:
"Use InputStream / byte[] array
You may already have your image in memory in an InputStream or byte[] array. The content-type header will not be set in the response. If you need to set a content-type, we recommend to use the org.primefaces.model.StreamedContent."

Also converting a byte array to a streamed content object is happening here:

  public void byteToStreamsSignatures() {
       String sMimeType = "image/jpeg";
       
       int count= selectedTailBoard.getSignatures().size();
       
       this.selectedStreamedSignatures = (List) new ArrayList<>();
       
       for(int i=0;i< selectedTailBoard.getSignatures().size();i++){
       
           byte[] byteData = selectedTailBoard.getSignatures().get(i).getSigImage();
           
           
           this.selectedStreamedSignatures.add(DefaultStreamedContent.builder().stream(() -> 
                   new ByteArrayInputStream(byteData)).contentType(sMimeType).build());
       }
       
   }

So again I thought I was doing what is expected via the documentation.
Thoughts or suggestions?
Thanks,
Scorliss

[tandraschko]

basically a mix of some restrictions like mentioned in the link and especially: https://primefaces.github.io/primefaces/14_0_0/#/core/dynamiccontent?id=iterating-component-support

short: copy the example in the showcase and study it