Displaying images stored in Mysql database as Blob using Rest Services, Java and Angular JS

Question

I'm building a web application using AngularJS as frontend. I'm using Rest services to call the backend and deploying the application in Jboss Wildfly. The application connects to a Mysql database where I have a Table Products. A product consists in one id and one image that is stored as a BLOB. The Product java entity is as follows, the :

@Entity
@Table(name = "PRODUCTS")
public class Product implements Serializable {

/**
 * 
 */
private static final long serialVersionUID = 1L;

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "ID")
private Long id;

@Column(name = "IMAGE", nullable = false, insertable = true, updatable = true)
private Blob image;

@Column(name="PRICE",nullable=false, insertable=true,updatable=true)
private Long price;

GETTERS AND SETTERS......
}

Then the code of the Rest Service:

@Path("/products")
public class ProductsService extends CommonService{

private static final Logger log =  Logger.getLogger(ProductsService.class);


@EJB
private ProductsServiceHandler handler;

@GET
public Response getAllProducts(@Context Request request, @Context HttpHeaders httpHeaders)
{
    try
    {
        List<Product> products=handler.findAllProducts();
        return Response.ok(products).header(ALLOW_ORIGIN_HEADER, "*").build();
    }
    catch(Exception e){return Response.status(Status.INTERNAL_SERVER_ERROR).build();}
}

The products are retrieved correctly from the database, with the images stores as Blob, but then when I try to send the response I get the following error:

Caused by: com.fasterxml.jackson.databind.JsonMappingException: No serializer found for class java. io.ByteArrayInputStream and no properties discovered to create BeanSerializer (to avoid exception, disable SerializationFeature.FAIL_ON_EMPTY_BEANS) ) (through reference chain: java.util.ArrayList[0 ]->com.fgonzalez.domainmodel.Product["image"]->$Proxy70["binaryStream"])

Which I'm guessing is because it does not know how to serialize the Blob. I noticed that if I send only the image as InputStream it does not complain (but now I'll have to figure out how to display that in Html). Any idea of how to achieve what I need?

Thank yo very much in advance!!

GreyBeardedGeek · Accepted Answer · 2015-01-11 00:23:39Z

2

The problem that you're having is that the Blob is essentially an InputStream, not the bytes of the image - you'd have to read the InputStream to get the image bytes.

If you solved that, you could transfer the binary image data by base-64 encoding or something, but then you're going to have a problem on the client side trying to figure out how to display it.

Instead, I'd change two things, if you can:

Store only the name of the image in the database, store the actual image on disk.
In the JSon response, only send the name of the image - then use the normal HTML constructs on the client to display the image - let the browser separately request the image from the server.

answered Jan 11, 2015 at 0:23

GreyBeardedGeek

30.3k2 gold badges51 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Moody Over a year ago

Oh shoot, I'm going to run into the same problem... fgonzalez, have you figured out a way to show these images from the database rather than disk?

Moody Over a year ago

Nevermind. I fixed the problem very easily, by calling a url that contains an id for every image. The controller would return a byte array. Problem fixed ;) no need to go through angularjs at all. (I'm using Spring MVC)

Collectives™ on Stack Overflow

Displaying images stored in Mysql database as Blob using Rest Services, Java and Angular JS

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related