Search code examples
jsfrichfacesajax4jsf

a4j:mediaOutput not working


I'm using the example from the website of JBoss to upload images and show them. The uploading works fine, but showing the images in the a4j:mediaOutput dosen't work. Can someone tell me what the problem is. Thanks

My code for the View:

<h:body>
<h:form>
    <h:panelGrid border="1" columns="2"  columnClasses="top,top">
        <rich:fileUpload fileUploadListener="#{fileUploadBean.uploadsAvailable}" id="upload"
            immediateUpload="#{fileUploadBean.autoUpload}"
            acceptedTypes="jpg, gif, png, bmp"
            allowFlash="#{fileUploadBean.useFlash}">
            <a4j:ajax render="info" event="uploadcomplete" />
        </rich:fileUpload>

        <h:panelGroup id="info">
            <rich:panel bodyClass="info">
                <f:facet name="header">
                    <h:outputText value="Uploaded Files Info" />
                </f:facet>
                <h:outputText value="No files currently uploaded"
                    rendered="#{fileUploadBean.size==0}" />
                <rich:dataGrid columns="1" value="#{fileUploadBean.files}"
                    var="file" rowKeyVar="row">
                    <rich:panel bodyClass="rich-laguna-panel-no-header">
                        <h:panelGrid columns="2">
                            <a4j:mediaOutput element="img" mimeType="#{file.mime}"
                                createContent="#{fileUploadBean.paint}" value="#{row}"
                                style="width:100px; height:100px;" cacheable="false">
                                <f:param value="#{fileUploadBean.timeStamp}" name="time" />
                            </a4j:mediaOutput>
                            <h:panelGrid columns="2">
                                <h:outputText value="File Name:" />
                                <h:outputText value="#{file.name}" />
                                <h:outputText value="File Length(bytes):" />
                                <h:outputText value="#{file.length}" />
                            </h:panelGrid>
                        </h:panelGrid>
                    </rich:panel>
                </rich:dataGrid>
            </rich:panel>               
            <br />
            <a4j:commandButton action="#{fileUploadBean.clearUploadData}"
                reRender="info, upload" value="Clear Uploaded Data"
                rendered="#{fileUploadBean.size>0}" />  
        </h:panelGroup>     
    </h:panelGrid>
</h:form>

the Bean

public class FileUploadBean implements Serializable {

private static final long serialVersionUID = 1L;

private ArrayList<File> files = new ArrayList<File>();
private int uploadsAvailable = 5;
private boolean autoUpload = false;
private boolean useFlash = false;
private int size;


public int getSize() {
    if (getFiles().size() > 0) {
        return getFiles().size();
    } else {
        return 0;
    }
}

public FileUploadBean() {
}

public void paint(OutputStream stream, Object object) throws IOException {
    stream.write(getFiles().get((Integer) object).getData());
    stream.close();
}

public void listener(FileUploadEvent event) throws Exception {
    UploadedFile item = event.getUploadedFile();
    File file = new File();
    file.setLength(item.getData().length);
    file.setName(item.getName());
    file.setData(item.getData());
    files.add(file);
    uploadsAvailable--;
}

public String clearUploadData() {
    files.clear();
    setUploadsAvailable(5);
    return null;
}

public long getTimeStamp() {
    return System.currentTimeMillis();
}

public ArrayList<File> getFiles() {
    return files;
}

public void setFiles(ArrayList<File> files) {
    this.files = files;
}

public int getUploadsAvailable() {
    return uploadsAvailable;
}

public void setUploadsAvailable(int uploadsAvailable) {
    this.uploadsAvailable = uploadsAvailable;
}

public boolean isAutoUpload() {
    return autoUpload;
}

public void setAutoUpload(boolean autoUpload) {
    this.autoUpload = autoUpload;
}

public boolean isUseFlash() {
    return useFlash;
}

public void setUseFlash(boolean useFlash) {
    this.useFlash = useFlash;
}

}

and the File Class:

public class File {

private String Name;
private String mime;
private long length;
private byte[] data;

public byte[] getData() {
    return data;
}

public void setData(byte[] data) {
    this.data = data;
}

public String getName() {
    return Name;
}

public void setName(String name) {
    Name = name;
    int extDot = name.lastIndexOf('.');
    if (extDot > 0) {
        String extension = name.substring(extDot + 1);
        if ("bmp".equals(extension)) {
            mime = "image/bmp";
        } else if ("jpg".equals(extension)) {
            mime = "image/jpeg";
        } else if ("gif".equals(extension)) {
            mime = "image/gif";
        } else if ("png".equals(extension)) {
            mime = "image/png";
        } else {
            mime = "image/unknown";
        }
    }
}

public long getLength() {
    return length;
}

public void setLength(long length) {
    this.length = length;
}

public String getMime() {
    return mime;
}
}

Solution

  • <rich:fileUpload fileUploadListener="#{fileUploadBean.uploadsAvailable}"
    

    The listener is set to the wrong method. (If you're switching from RichFaces 3 to 4 you can just use the current code instead of trying to port it yourself.)