Update graphicImage after upload

I want to update a graphicImage after a new profile image has been uploaded.

<h:panelGroup id="profileImage" layout="block">
                <p:graphicImage id="myImage" cache="false" value="#{myProfile.usersProfileImage}" />    
                <p:fileUpload fileUploadListener="#{myProfile.fileUploadListener}"
                    mode="advanced" auto="true" sizeLimit="100000"
                    update="profileImage"
                    allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
                <pe:imageAreaSelect id="imageCropper" for="myImage" hide="false"
                    imageHeight="250" imageWidth="250" aspectRatio="1:1">
                    <p:ajax event="selectEnd"
                        listener="#{myProfile.selectEndListener}" />
                </pe:imageAreaSelect>
            </h:panelGroup>

In my backing bean

public void fileUploadListener(FileUploadEvent event) {

        try {
            BufferedImage image = ImageIO
                    .read(event.getFile().getInputstream());
            if (image != null) {
                ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
                ImageIO.write(image, "jpg", outputStream);
                user.setProfileJpegImage(outputStream.toByteArray());
            } else {
                throw new IOException("FAILED TO CONVERT PICTURE");
            }
        } catch (IOException e) {
            throw new IllegalStateException(e);
        }
    }

I dont know why but the image does not update. If I refresh the page with f5 the image is updated. I also tried to update="myImage" but it work neither

Discussed many times in the PrimeFaces forum. It's a bug and it's fixed in elite versions and for the upcomfing 5.0

Update graphicImage after upload - primefaces - iOS, I want to update a graphicImage after a new profile image has been uploaded. <h​:panelGroup id="profileImage" layout="block"> <p:graphicImage id="myImage"  After uploading an update to my web page, it looks the same. Updated: 05/21/2018 by. First, make sure the page you are uploading is saved on your computer or server. If the page has not been saved, you are uploading the page without any changes.

There is currently no fix for this bug, but some Workarounds exists. See also this Thread. The workarounds in this thread suggest to append a random parameter to the images src attribute, either via Javascript or via a backing bean. This forces the browser to reload the image.

If you are using a fileUpload, then insert your JS-Code into the oncomplete attribute.

p:graphicImage does not load after fileUpload.upload event, And then on upload it should update my graphicImage element: Code: Select all <p:graphicImag value="#{myBean.image}"></p:graphicImage>. tandraschko PrimeFaces Core Developer Posts: 3728 Joined: Fri Dec 03, 2010 12:11 pm Location: Bavaria, DE

I lost so many times with this problem that I decided to change completely the way I work with it all. I use AWS S3 file system to host my images. I upload it there and save info like originalFileName, MimeType, newFileName, bucketName, etc in database. Each file has a database object for it. I upload it with no problem. After upload the file I force the redirect to update the file:

NavigationHandler handler = FacesContext.getCurrentInstance().getApplication().getNavigationHandler();
handler.handleNavigation(FacesContext.getCurrentInstance(), null, "/dashboard?faces-redirect=true");
FacesContext.getCurrentInstance().renderResponse();

I view the file with:

<p:graphicImage value="#{userImageFileBean.endereco}"
                                    title="#{userImageFileBean.userImageFile.title}" 
                                    alt="#{userImageFileBean.userImageFile.alt}" 
                                    />

The userImageFileBean endereco method returns a String with the file S3 address. The S3 bucket should have a read-only policy. Anyone will be able to download all your files if the address you build use only ids and other common words. For run out this kind of issue you can make the address and the name file based on UUID, that is hard to discover. I hope I could help you with this issue that took me out of bed for 2 weeks.

Update graphicImage after upload - primefaces, I want to update a graphicImage after a new profile image has been uploaded. <h​:panelGroup id="profileImage" layout="block"> <p:graphicImage id="myImage"  Photo Uploading After Upgrading to Windows 10. Upgraded to Windows 10 yesterday. Tried to upload pictures from my Canon PowerShot S3 IS in the usual manner. Camera light usually blinks, but kept to a steady green (review pictures) mode, first indication of something not right. Second indication was no option to view or upload photos.

Refresh graphicImage after upload, Imagine the following scenario: An inputFile and right below it a graphicImage which displays the previously uploaded image. The problem is  In this guide, we'll show you the steps to get around the intermittent issues printing after applying cumulative update KB4522016 and KB4524147 on Windows 10 version 1903 (May 2019 Update).

Solved: Difficulty Updating a Graphic Image, Solved: I changed an image on local folder tree, then saved and put the files. Difficulty Updating a Graphic Image Then re-upload your image to server. Why You Should Update Your Graphics Drivers. Updates to your computer’s motherboard, sound card, and network drivers don’t generally give speed improvements. They do often fix rare bugs, but to be honest, they just as often introduce new bugs. So, if things are working okay, it’s typically not worth it to bother.

jsf: Alternative for p:graphicImage which can show images from byte , myStreamedContent followed by updating p:graphicimage , the can't I update a p:graphicImage twice after upload a file with p:uploadFile. Imgur is the easiest way to discover and enjoy the magic of the Internet.

Comments
  • Information for those comming here and using PF 6.1 (community edition): something is still not right with graphicImage control. Workaround suggested by Xecu helps though.