Display uploaded image in JSF

Question

I have a view scoped bean where I create a person. A person can have a picture. This picture is uploaded the same page the person is created. The picture is not stored in a

Answer 1

I've gone for a different approach. I initially went for displaying an uploaded image, however if the Person isn't created yet it seemed like a better idea to keep it all client side. I found this question and created the following based on the chosen answer:

In the head I include html5shiv if the browser is IE and the version is less than 9 for compatibility:

To display/upload the image I have these elements:

And some JavaScript/jQuery magic:

function readPicture(input, output)
{
    if (input.files && input.files[0])
    {
        var reader = new FileReader();
        reader.onload = function(e)
        {
            output.attr('src', e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
}

$("[id='#{upload.clientId}']").change(
    function()
    {
        readPicture(this, $("[id='#{image.clientId}']"));
    });

The uploadedPicture property is now a simple property:

@ManagedBean(name = "personBean")
@ViewScoped
public class PersonBean
{
    private UploadedFile uploadedPicture;

    public UploadedFile getUploadedPicture()
    {
        return uploadedPicture;
    }

    public void setUploadedPicture(UploadedFile uploadedPicture)
    {
        this.uploadedPicture = uploadedPicture;
    }
}