BLOB images are displayed only on refreshing a page after an update via p:dataTable is made in PrimeFaces

Question

I\'m displaying images stored in the form of BLOB in MySQL on a as follows.

Answer 1

The newly updated image is displayed only when the page refreshed by pressing F5 (on most browsers). It is even not displayed on page load (entering a URL into the address bar and then pressing the enter key).

The image is being cached by the webbrowser. Resources are cached on a per-URL basis via the cache-related instructions set in the response headers. Your concrete problem is caused because the resource URL is still the same and the webbrowser isn't aware that the resource has changed in the server side. The OmniFaces CacheControlFilter showcase page explains caching in detail (note: the filter is not the solution to this problem).

You basically need to force the webbrowser to re-request the resource by changing the URL. One of most common approaches for this kind of situation, whereby a cacheable resource is suddenly changed and its change needs to be immediately reflected to all clients, is appending the "last modified" timestamp of the image to the query string of the URL. Given that you're using JPA, so this should do:

• Add a lastModified column to the brand table:

  ALTER TABLE brand ADD COLUMN lastModified TIMESTAMP DEFAULT now();
  

• Extend the Brand entity with the appropriate property and a @PreUpdate which sets it:

  @Column @Temporal(TemporalType.TIMESTAMP)
  private Date lastModified;
  
  @PreUpdate
  public void onUpdate() {
      lastModified = new Date();
  }
  
  // +getter+setter
  

  (a @PreUpdate annotated method is invoked by JPA right before every UPDATE query)

• Append it to the image URL (the parameter name v is a hint to "version"):

  (I would here rename row to brand for clarity and brandId to id to deduplicate)

• Finally, if you're using PrimeFaces 5.0 or newer, then you also need to disable server side caching:

Design notice: if the image is not necessarily updated on every update of Brand, then split it off to another table Image and let Brand have a FK (@ManyToOne or @OneToOne) to Image. This also makes the property "image" reusable across various entities in the webapp.